<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><div id="myscoll"></div><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>前端面试官 | 晚夜微雨问海棠のBlog</title><meta name="keywords" content="node下cors跨域问题"><meta name="author" content="晚夜微雨问海棠"><meta name="copyright" content="晚夜微雨问海棠"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="html 共18题1.网站开发中，如何实现图片的懒加载1.方案一: 位置计算 + 滚动事件 (Scroll) + DataSet API2.方案二: getBoundingClientRect API + Scroll with Throttle + DataSet API3.方案三: IntersectionObserver API + DataSet API4.方案四: LazyLoading">
<meta property="og:type" content="article">
<meta property="og:title" content="前端面试官">
<meta property="og:url" content="http://example.com/posts/852f977b.html">
<meta property="og:site_name" content="晚夜微雨问海棠のBlog">
<meta property="og:description" content="html 共18题1.网站开发中，如何实现图片的懒加载1.方案一: 位置计算 + 滚动事件 (Scroll) + DataSet API2.方案二: getBoundingClientRect API + Scroll with Throttle + DataSet API3.方案三: IntersectionObserver API + DataSet API4.方案四: LazyLoading">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://s1.ax1x.com/2023/01/28/pSaldDe.jpg">
<meta property="article:published_time" content="2023-01-28T14:08:37.000Z">
<meta property="article:modified_time" content="2023-02-07T09:38:02.222Z">
<meta property="article:author" content="晚夜微雨问海棠">
<meta property="article:tag" content="朝花夕拾">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://s1.ax1x.com/2023/01/28/pSaldDe.jpg"><link rel="shortcut icon" href="/img/favicon.png"><link rel="canonical" href="http://example.com/posts/852f977b"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//fonts.googleapis.com" crossorigin=""/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="manifest" href="/manifest.json"/><meta name="msapplication-TileColor" content="#49b1f5"/><link rel="apple-touch-icon" sizes="180x180" href="/img/siteicon/128.png"/><link rel="icon" type="image/png" sizes="32x32" href="/img/siteicon/32.png"/><link rel="icon" type="image/png" sizes="16x16" href="/img/siteicon/16.png"/><link rel="mask-icon" href="/img/siteicon/128.png" color="#5bbad5"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium+Web&amp;display=swap" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: {"path":"/search.xml","preload":false,"languages":{"hits_empty":"找不到您查询的内容：${query}"}},
  translate: {"defaultEncoding":2,"translateDelay":0,"msgToTraditionalChinese":"繁","msgToSimplifiedChinese":"简"},
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":150},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: true,
    post: true
  },
  runtime: '天',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: {"limitCount":650,"languages":{"author":"作者: 晚夜微雨问海棠","link":"链接: ","source":"来源: 晚夜微雨问海棠のBlog","info":"著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。"}},
  lightbox: 'fancybox',
  Snackbar: {"chs_to_cht":"你已切换为繁体","cht_to_chs":"你已切换为简体","day_to_night":"你已切换为深色模式","night_to_day":"你已切换为浅色模式","bgLight":"#49b1f5","bgDark":"#1f1f1f","position":"top-right"},
  source: {
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: true,
  isAnchor: true
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: '前端面试官',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2023-02-07 17:38:02'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const detectApple = () => {
      if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'"> <link rel="stylesheet" href="/swiper/swiper.min.css"> <link rel="stylesheet" href="/swiper/swiperstyle.css"> <link rel="stylesheet" href="/css/rightMenu.css"> <link rel="stylesheet" href="/css/constrain.css"><!-- hexo injector head_end start --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Zfour/Butterfly-card-history/baiduhistory/css/main.css"><link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-categories-card@1.0.0/lib/categorybar.css"><link rel="stylesheet" href="https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/clock.min.css" /><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Zfour/Butterfly-double-row-display@1.00/cardlistpost.min.css"/>
<style>#recent-posts > .recent-post-item >.recent-post-info > .article-meta-wrap > .tags:before {content:"\A";
  white-space: pre;}#recent-posts > .recent-post-item >.recent-post-info > .article-meta-wrap > .tags > .article-meta__separator{display:none}</style>
<link rel="stylesheet" href="https://cdn.cbd.int/anzhiyu-blog@2.0.3/css/runtime/runtime.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.cbd.int/hexo-butterfly-swiper-anzhiyu@1.0.4/lib/swiper.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.cbd.int/hexo-butterfly-swiper-anzhiyu@1.0.4/lib/swiperstyle.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.cbd.int/hexo-butterfly-wowjs/lib/animate.min.css" media="print" onload="this.media='screen'"><link rel="stylesheet" href="https://cdn.cbd.int/hexo-butterfly-tag-plugins-plus@latest/lib/assets/font-awesome-animation.min.css" media="defer" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.cbd.int/hexo-butterfly-tag-plugins-plus@latest/lib/tag_plugins.css" media="defer" onload="this.media='all'"><script src="https://cdn.cbd.int/hexo-butterfly-tag-plugins-plus@latest/lib/assets/carousel-touch.js"></script><!-- hexo injector head_end end --><meta name="generator" content="Hexo 6.2.0"><link rel="alternate" href="/atom.xml" title="晚夜微雨问海棠のBlog" type="application/atom+xml">
</head><body><div id="loading-box"><div class="loading-left-bg"></div><div class="loading-right-bg"></div><div class="spinner-box"><div class="configure-border-1"><div class="configure-core"></div></div><div class="configure-border-2"><div class="configure-core"></div></div><div class="loading-word">加载中...</div></div></div><div id="web_bg" style="background:url(https://s1.ax1x.com/2023/01/28/pSaldDe.jpg);background-attachment: local;background-position: center;background-size: cover;background-repeat: no-repeat;"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "" data-lazy-src="https://img2.woyaogexing.com/2022/06/28/de1ce3dc65468fd4!400x400.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">97</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">31</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">17</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/bangumis/index.html"><i class="fa-fw fas fa-home"></i><span> 追番</span></a></div><div class="menus_item"><a class="site-page" href="/comments/"><i class="fa-fw fas fa-envelope"></i><span> 留言板</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 生活馆</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" target="_blank" rel="noopener" href="http://81.69.189.243:8082/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-video"></i><span> 电影</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友情链接</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://s1.ax1x.com/2023/01/28/pSaldDe.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">晚夜微雨问海棠のBlog</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/bangumis/index.html"><i class="fa-fw fas fa-home"></i><span> 追番</span></a></div><div class="menus_item"><a class="site-page" href="/comments/"><i class="fa-fw fas fa-envelope"></i><span> 留言板</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 生活馆</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" target="_blank" rel="noopener" href="http://81.69.189.243:8082/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-video"></i><span> 电影</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友情链接</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">前端面试官</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2023-01-28T14:08:37.000Z" title="发表于 2023-01-28 22:08:37">2023-01-28</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2023-02-07T09:38:02.222Z" title="更新于 2023-02-07 17:38:02">2023-02-07</time></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">12.8k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>44分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="前端面试官"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="html-共18题"><a href="#html-共18题" class="headerlink" title="html 共18题"></a>html 共18题</h1><h2 id="1-网站开发中，如何实现图片的懒加载"><a href="#1-网站开发中，如何实现图片的懒加载" class="headerlink" title="1.网站开发中，如何实现图片的懒加载"></a>1.网站开发中，如何实现图片的懒加载</h2><h3 id="1-方案一-位置计算-滚动事件-Scroll-DataSet-API"><a href="#1-方案一-位置计算-滚动事件-Scroll-DataSet-API" class="headerlink" title="1.方案一: 位置计算 + 滚动事件 (Scroll) + DataSet API"></a>1.方案一: 位置计算 + 滚动事件 (Scroll) + DataSet API</h3><h3 id="2-方案二-getBoundingClientRect-API-Scroll-with-Throttle-DataSet-API"><a href="#2-方案二-getBoundingClientRect-API-Scroll-with-Throttle-DataSet-API" class="headerlink" title="2.方案二: getBoundingClientRect API + Scroll with Throttle + DataSet API"></a>2.方案二: getBoundingClientRect API + Scroll with Throttle + DataSet API</h3><h3 id="3-方案三-IntersectionObserver-API-DataSet-API"><a href="#3-方案三-IntersectionObserver-API-DataSet-API" class="headerlink" title="3.方案三: IntersectionObserver API + DataSet API"></a>3.方案三: IntersectionObserver API + DataSet API</h3><h3 id="4-方案四-LazyLoading-属性"><a href="#4-方案四-LazyLoading-属性" class="headerlink" title="4.方案四: LazyLoading 属性"></a>4.方案四: LazyLoading 属性</h3><h2 id="2-浏览器中如何实现剪切板复制内容的功能"><a href="#2-浏览器中如何实现剪切板复制内容的功能" class="headerlink" title="2.浏览器中如何实现剪切板复制内容的功能"></a>2.浏览器中如何实现剪切板复制内容的功能</h2><h3 id="1-选中-Selection-API-Range-API"><a href="#1-选中-Selection-API-Range-API" class="headerlink" title="1.选中: Selection API/Range API"></a>1.选中: Selection API/Range API</h3><h3 id="2-复制-execCommand"><a href="#2-复制-execCommand" class="headerlink" title="2.复制: execCommand"></a>2.复制: execCommand</h3><h2 id="3-localhost-3000-与-localhost-5000-的-cookie-信息是否共享"><a href="#3-localhost-3000-与-localhost-5000-的-cookie-信息是否共享" class="headerlink" title="3.localhost:3000 与 localhost:5000 的 cookie 信息是否共享"></a>3.localhost:3000 与 localhost:5000 的 cookie 信息是否共享</h2><h2 id="4-什么是-CSRF-攻击"><a href="#4-什么是-CSRF-攻击" class="headerlink" title="4.什么是 CSRF 攻击"></a>4.什么是 CSRF 攻击</h2><h2 id="5-在浏览器中如何监听剪切板中内容"><a href="#5-在浏览器中如何监听剪切板中内容" class="headerlink" title="5.在浏览器中如何监听剪切板中内容"></a>5.在浏览器中如何监听剪切板中内容</h2><h2 id="6-如何把-json-数据转化为-demo-json-并下载文件"><a href="#6-如何把-json-数据转化为-demo-json-并下载文件" class="headerlink" title="6.如何把 json 数据转化为 demo.json 并下载文件"></a>6.如何把 json 数据转化为 demo.json 并下载文件</h2><h2 id="7-简单介绍-requestIdleCallback-及使用场景"><a href="#7-简单介绍-requestIdleCallback-及使用场景" class="headerlink" title="7.简单介绍 requestIdleCallback 及使用场景"></a>7.简单介绍 requestIdleCallback 及使用场景</h2><h2 id="8-如何计算白屏时间和首屏时间"><a href="#8-如何计算白屏时间和首屏时间" class="headerlink" title="8.如何计算白屏时间和首屏时间"></a>8.如何计算白屏时间和首屏时间</h2><h2 id="9-什么是重排重绘，如何减少重拍重绘"><a href="#9-什么是重排重绘，如何减少重拍重绘" class="headerlink" title="9.什么是重排重绘，如何减少重拍重绘"></a>9.什么是重排重绘，如何减少重拍重绘</h2><h2 id="10-HTML-中的-input-标签有哪些-type"><a href="#10-HTML-中的-input-标签有哪些-type" class="headerlink" title="10.HTML 中的 input 标签有哪些 type"></a>10.HTML 中的 input 标签有哪些 type</h2><h2 id="11-什么是-Data-URL"><a href="#11-什么是-Data-URL" class="headerlink" title="11.什么是 Data URL"></a>11.什么是 Data URL</h2><h2 id="12-什么是-HTML-的实体编码-HTML-Entity-Encode"><a href="#12-什么是-HTML-的实体编码-HTML-Entity-Encode" class="headerlink" title="12.什么是 HTML 的实体编码 (HTML Entity Encode)"></a>12.什么是 HTML 的实体编码 (HTML Entity Encode)</h2><h2 id="13-textarea-如何禁止拉伸"><a href="#13-textarea-如何禁止拉伸" class="headerlink" title="13.textarea 如何禁止拉伸"></a>13.textarea 如何禁止拉伸</h2><h2 id="14-在-Canvas-中如何处理跨域的图片"><a href="#14-在-Canvas-中如何处理跨域的图片" class="headerlink" title="14.在 Canvas 中如何处理跨域的图片"></a>14.在 Canvas 中如何处理跨域的图片</h2><h2 id="15-如何取消请求的发送"><a href="#15-如何取消请求的发送" class="headerlink" title="15.如何取消请求的发送"></a>15.如何取消请求的发送</h2><h3 id="1-XHR-使用-xhr-abort"><a href="#1-XHR-使用-xhr-abort" class="headerlink" title="1.XHR 使用 xhr.abort()"></a>1.XHR 使用 xhr.abort()</h3><h3 id="2-fetch-使用-AbortController"><a href="#2-fetch-使用-AbortController" class="headerlink" title="2.fetch 使用 AbortController"></a>2.fetch 使用 AbortController</h3><h2 id="16-HTML-标签有哪些行内元素"><a href="#16-HTML-标签有哪些行内元素" class="headerlink" title="16.HTML 标签有哪些行内元素"></a>16.HTML 标签有哪些行内元素</h2><h2 id="17-HTML-中有哪些语义化标签"><a href="#17-HTML-中有哪些语义化标签" class="headerlink" title="17.HTML 中有哪些语义化标签"></a>17.HTML 中有哪些语义化标签</h2><h2 id="18-什么是-URL-编码-URL-Encode"><a href="#18-什么是-URL-编码-URL-Encode" class="headerlink" title="18.什么是 URL 编码 (URL Encode)"></a>18.什么是 URL 编码 (URL Encode)</h2><h1 id="CSS-共80题"><a href="#CSS-共80题" class="headerlink" title="CSS 共80题"></a>CSS 共80题</h1><h2 id="1-如何实现一个元素的水平垂直居中"><a href="#1-如何实现一个元素的水平垂直居中" class="headerlink" title="1.如何实现一个元素的水平垂直居中"></a>1.如何实现一个元素的水平垂直居中</h2><h2 id="2-css-如何实现左侧固定-300px，右侧自适应的布局"><a href="#2-css-如何实现左侧固定-300px，右侧自适应的布局" class="headerlink" title="2.css 如何实现左侧固定 300px，右侧自适应的布局"></a>2.css 如何实现左侧固定 300px，右侧自适应的布局</h2><h2 id="3-如何实现一个-loading-动画"><a href="#3-如何实现一个-loading-动画" class="headerlink" title="3.如何实现一个 loading 动画"></a>3.如何实现一个 loading 动画</h2><h3 id="1-svg-实现方案"><a href="#1-svg-实现方案" class="headerlink" title="1.svg 实现方案"></a>1.svg 实现方案</h3><h2 id="4-如何使用-css-写一个魔方"><a href="#4-如何使用-css-写一个魔方" class="headerlink" title="4.如何使用 css 写一个魔方"></a>4.如何使用 css 写一个魔方</h2><h2 id="5-如何使用-css-写一个有-3D-效果的立方体"><a href="#5-如何使用-css-写一个有-3D-效果的立方体" class="headerlink" title="5.如何使用 css 写一个有 3D 效果的立方体"></a>5.如何使用 css 写一个有 3D 效果的立方体</h2><h2 id="6-有没有使用过-css-variable，它解决了哪些问题"><a href="#6-有没有使用过-css-variable，它解决了哪些问题" class="headerlink" title="6.有没有使用过 css variable，它解决了哪些问题"></a>6.有没有使用过 css variable，它解决了哪些问题</h2><h2 id="7-谈谈你对-styled-component-的看法"><a href="#7-谈谈你对-styled-component-的看法" class="headerlink" title="7.谈谈你对 styled-component 的看法"></a>7.谈谈你对 styled-component 的看法</h2><h2 id="8-使用-CSS-如何画一个三角形"><a href="#8-使用-CSS-如何画一个三角形" class="headerlink" title="8.使用 CSS 如何画一个三角形"></a>8.使用 CSS 如何画一个三角形</h2><h2 id="9-display-inline-的元素设置-margin-和-padding-会生效吗"><a href="#9-display-inline-的元素设置-margin-和-padding-会生效吗" class="headerlink" title="9.display: inline 的元素设置 margin 和 padding 会生效吗"></a>9.display: inline 的元素设置 margin 和 padding 会生效吗</h2><h2 id="10-html-的默认-display-属性是多少"><a href="#10-html-的默认-display-属性是多少" class="headerlink" title="10.html 的默认 display 属性是多少"></a>10.html 的默认 display 属性是多少</h2><h2 id="11-响应式布局需要注意哪一些"><a href="#11-响应式布局需要注意哪一些" class="headerlink" title="11.响应式布局需要注意哪一些"></a>11.响应式布局需要注意哪一些</h2><h2 id="12-对一个非定长宽的块状元素如何做垂直水平居中"><a href="#12-对一个非定长宽的块状元素如何做垂直水平居中" class="headerlink" title="12.对一个非定长宽的块状元素如何做垂直水平居中"></a>12.对一个非定长宽的块状元素如何做垂直水平居中</h2><h2 id="13-如何实现左右固定，中间自适应布局"><a href="#13-如何实现左右固定，中间自适应布局" class="headerlink" title="13.如何实现左右固定，中间自适应布局"></a>13.如何实现左右固定，中间自适应布局</h2><h2 id="14-如何实现表格单双行条纹样式"><a href="#14-如何实现表格单双行条纹样式" class="headerlink" title="14.如何实现表格单双行条纹样式"></a>14.如何实现表格单双行条纹样式</h2><h2 id="15-简述下-css-specificity"><a href="#15-简述下-css-specificity" class="headerlink" title="15.简述下 css specificity"></a>15.简述下 css specificity</h2><h2 id="16-’-’-与-‘-’-选择器有什么不同"><a href="#16-’-’-与-‘-’-选择器有什么不同" class="headerlink" title="16.’+’ 与 ‘~’ 选择器有什么不同"></a>16.’+’ 与 ‘~’ 选择器有什么不同</h2><h2 id="17-有哪些-css-属性不能展示动画效果"><a href="#17-有哪些-css-属性不能展示动画效果" class="headerlink" title="17.有哪些 css 属性不能展示动画效果"></a>17.有哪些 css 属性不能展示动画效果</h2><h2 id="18-css-动画与-js-动画哪个性能更好"><a href="#18-css-动画与-js-动画哪个性能更好" class="headerlink" title="18.css 动画与 js 动画哪个性能更好"></a>18.css 动画与 js 动画哪个性能更好</h2><h2 id="19-css-中属性选择器及类选择器的权重哪个高"><a href="#19-css-中属性选择器及类选择器的权重哪个高" class="headerlink" title="19.css 中属性选择器及类选择器的权重哪个高"></a>19.css 中属性选择器及类选择器的权重哪个高</h2><h2 id="20-为什么会发生样式抖动"><a href="#20-为什么会发生样式抖动" class="headerlink" title="20.为什么会发生样式抖动"></a>20.为什么会发生样式抖动</h2><h2 id="21-position-sticky-如何工作，适用于哪些场景"><a href="#21-position-sticky-如何工作，适用于哪些场景" class="headerlink" title="21.position: sticky 如何工作，适用于哪些场景"></a>21.position: sticky 如何工作，适用于哪些场景</h2><h2 id="22-什么是层叠上下文-stacking-contect-，谈谈对它的理解"><a href="#22-什么是层叠上下文-stacking-contect-，谈谈对它的理解" class="headerlink" title="22.什么是层叠上下文 (stacking contect)，谈谈对它的理解"></a>22.什么是层叠上下文 (stacking contect)，谈谈对它的理解</h2><h2 id="23-你用-css-实现过什么不错的效果"><a href="#23-你用-css-实现过什么不错的效果" class="headerlink" title="23.你用 css 实现过什么不错的效果"></a>23.你用 css 实现过什么不错的效果</h2><h2 id="24-你做前端有多少时间花在写-css-上"><a href="#24-你做前端有多少时间花在写-css-上" class="headerlink" title="24.你做前端有多少时间花在写 css 上"></a>24.你做前端有多少时间花在写 css 上</h2><h2 id="25-伪类与伪元素有什么区别"><a href="#25-伪类与伪元素有什么区别" class="headerlink" title="25.伪类与伪元素有什么区别"></a>25.伪类与伪元素有什么区别</h2><h2 id="26-css-如何匹配前-N-个子元素及最后-N-个子元素"><a href="#26-css-如何匹配前-N-个子元素及最后-N-个子元素" class="headerlink" title="26.css 如何匹配前 N 个子元素及最后 N 个子元素"></a>26.css 如何匹配前 N 个子元素及最后 N 个子元素</h2><h2 id="27-如何使用-CSS-实现网站的暗黑模式-Dark-Mode"><a href="#27-如何使用-CSS-实现网站的暗黑模式-Dark-Mode" class="headerlink" title="27.如何使用 CSS 实现网站的暗黑模式 (Dark Mode)"></a>27.如何使用 CSS 实现网站的暗黑模式 (Dark Mode)</h2><h3 id="1-Reference"><a href="#1-Reference" class="headerlink" title="1.Reference"></a>1.Reference</h3><h2 id="28-介绍-CSS-隐藏页面中某个元素的几种方法"><a href="#28-介绍-CSS-隐藏页面中某个元素的几种方法" class="headerlink" title="28.介绍 CSS 隐藏页面中某个元素的几种方法"></a>28.介绍 CSS 隐藏页面中某个元素的几种方法</h2><h3 id="1-display-none"><a href="#1-display-none" class="headerlink" title="1.display: none"></a>1.display: none</h3><h3 id="2-opacity-0"><a href="#2-opacity-0" class="headerlink" title="2.opacity: 0"></a>2.opacity: 0</h3><h3 id="3-visibility-hidden"><a href="#3-visibility-hidden" class="headerlink" title="3.visibility: hidden"></a>3.visibility: hidden</h3><h3 id="4-content-visibility"><a href="#4-content-visibility" class="headerlink" title="4.content-visibility"></a>4.content-visibility</h3><h3 id="5-绝对定位于当前页面的不可见位置"><a href="#5-绝对定位于当前页面的不可见位置" class="headerlink" title="5.绝对定位于当前页面的不可见位置"></a>5.绝对定位于当前页面的不可见位置</h3><h3 id="6-字体大小设置为-0"><a href="#6-字体大小设置为-0" class="headerlink" title="6.字体大小设置为 0"></a>6.字体大小设置为 0</h3><h2 id="29-css-如何实现响应式布局大屏幕三等分、中屏幕二等分、小屏幕一等分"><a href="#29-css-如何实现响应式布局大屏幕三等分、中屏幕二等分、小屏幕一等分" class="headerlink" title="29.css 如何实现响应式布局大屏幕三等分、中屏幕二等分、小屏幕一等分"></a>29.css 如何实现响应式布局大屏幕三等分、中屏幕二等分、小屏幕一等分</h2><h3 id="终极解决方案"><a href="#终极解决方案" class="headerlink" title="终极解决方案"></a>终极解决方案</h3><h3 id="终极解决方案2"><a href="#终极解决方案2" class="headerlink" title="终极解决方案2"></a>终极解决方案2</h3><h2 id="30-前端开发中如何进行多主题配置"><a href="#30-前端开发中如何进行多主题配置" class="headerlink" title="30.前端开发中如何进行多主题配置"></a>30.前端开发中如何进行多主题配置</h2><h2 id="31-如何自定义滚动条的样式"><a href="#31-如何自定义滚动条的样式" class="headerlink" title="31.如何自定义滚动条的样式"></a>31.如何自定义滚动条的样式</h2><h2 id="32-如何实现容器中子元素三个三列布局，子元素两个则两列布局"><a href="#32-如何实现容器中子元素三个三列布局，子元素两个则两列布局" class="headerlink" title="32.如何实现容器中子元素三个三列布局，子元素两个则两列布局"></a>32.如何实现容器中子元素三个三列布局，子元素两个则两列布局</h2><h2 id="33-网站设置字体时，如何设置优先使用系统默认字体"><a href="#33-网站设置字体时，如何设置优先使用系统默认字体" class="headerlink" title="33.网站设置字体时，如何设置优先使用系统默认字体"></a>33.网站设置字体时，如何设置优先使用系统默认字体</h2><h2 id="34-写-CSS-时如何避免命名样式冲突"><a href="#34-写-CSS-时如何避免命名样式冲突" class="headerlink" title="34.写 CSS 时如何避免命名样式冲突"></a>34.写 CSS 时如何避免命名样式冲突</h2><h3 id="1-BEM-式-home-page-home-page-btn"><a href="#1-BEM-式-home-page-home-page-btn" class="headerlink" title="1.BEM 式: .home-page .home-page-btn"></a>1.BEM 式: .home-page .home-page-btn</h3><h3 id="2-CSS-Scoped"><a href="#2-CSS-Scoped" class="headerlink" title="2.CSS Scoped"></a>2.CSS Scoped</h3><h3 id="3-CSS-Module"><a href="#3-CSS-Module" class="headerlink" title="3.CSS Module"></a>3.CSS Module</h3><h2 id="35-CSS-如何设置方格背景"><a href="#35-CSS-如何设置方格背景" class="headerlink" title="35.CSS 如何设置方格背景"></a>35.CSS 如何设置方格背景</h2><h2 id="36-如何更好地给元素设置-z-index"><a href="#36-如何更好地给元素设置-z-index" class="headerlink" title="36.如何更好地给元素设置 z-index"></a>36.如何更好地给元素设置 z-index</h2><h2 id="37-画一个-100x100-的方框，其中文字可以正常换行，文字过多超过方框显示滚动条"><a href="#37-画一个-100x100-的方框，其中文字可以正常换行，文字过多超过方框显示滚动条" class="headerlink" title="37.画一个 100x100 的方框，其中文字可以正常换行，文字过多超过方框显示滚动条"></a>37.画一个 100x100 的方框，其中文字可以正常换行，文字过多超过方框显示滚动条</h2><h2 id="38-Grid-布局如何实现类似-flex-row-reverse"><a href="#38-Grid-布局如何实现类似-flex-row-reverse" class="headerlink" title="38.Grid 布局如何实现类似 flex: row-reverse"></a>38.Grid 布局如何实现类似 flex: row-reverse</h2><h2 id="39-HTML-标签有哪些行内元素"><a href="#39-HTML-标签有哪些行内元素" class="headerlink" title="39.HTML 标签有哪些行内元素"></a>39.HTML 标签有哪些行内元素</h2><h2 id="40-CSS-如何设置一行超出显示省略号"><a href="#40-CSS-如何设置一行超出显示省略号" class="headerlink" title="40.CSS 如何设置一行超出显示省略号"></a>40.CSS 如何设置一行超出显示省略号</h2><h2 id="41-CSS-如何设置多行超出显示省略号"><a href="#41-CSS-如何设置多行超出显示省略号" class="headerlink" title="41.CSS 如何设置多行超出显示省略号"></a>41.CSS 如何设置多行超出显示省略号</h2><h2 id="42-flex-布局中-order-有何作用"><a href="#42-flex-布局中-order-有何作用" class="headerlink" title="42.flex 布局中 order 有何作用"></a>42.flex 布局中 order 有何作用</h2><h2 id="43-flex-布局中-align-content-与-align-items-有何区别"><a href="#43-flex-布局中-align-content-与-align-items-有何区别" class="headerlink" title="43.flex 布局中 align-content 与 align-items 有何区别"></a>43.flex 布局中 align-content 与 align-items 有何区别</h2><h2 id="44-子元素垂直居中，并且该正方形的长度-宽度为父容器宽度-width-一半的正方形"><a href="#44-子元素垂直居中，并且该正方形的长度-宽度为父容器宽度-width-一半的正方形" class="headerlink" title="44.子元素垂直居中，并且该正方形的长度/宽度为父容器宽度(width)一半的正方形"></a>44.子元素垂直居中，并且该正方形的长度/宽度为父容器宽度(width)一半的正方形</h2><h2 id="45-简述-css-中-position-的值"><a href="#45-简述-css-中-position-的值" class="headerlink" title="45.简述 css 中 position 的值"></a>45.简述 css 中 position 的值</h2><h2 id="46-什么是-BFC"><a href="#46-什么是-BFC" class="headerlink" title="46.什么是 BFC"></a>46.什么是 BFC</h2><h2 id="47-CSS-如何实现固定长宽比的元素"><a href="#47-CSS-如何实现固定长宽比的元素" class="headerlink" title="47.CSS 如何实现固定长宽比的元素"></a>47.CSS 如何实现固定长宽比的元素</h2><h2 id="48-rem、em、vw、vh-的值各是什么意思"><a href="#48-rem、em、vw、vh-的值各是什么意思" class="headerlink" title="48.rem、em、vw、vh 的值各是什么意思"></a>48.rem、em、vw、vh 的值各是什么意思</h2><h2 id="49-normalize-css-与-reset-css-又何区别"><a href="#49-normalize-css-与-reset-css-又何区别" class="headerlink" title="49.normalize.css 与 reset.css 又何区别"></a>49.normalize.css 与 reset.css 又何区别</h2><h2 id="50-line-height-的值分别取-2-2em-200-有什么区别"><a href="#50-line-height-的值分别取-2-2em-200-有什么区别" class="headerlink" title="50.line-height 的值分别取 [2, 2em, 200%] 有什么区别?"></a>50.line-height 的值分别取 [2, 2em, 200%] 有什么区别?</h2><h2 id="51-某元素的-fontSize-2rem-lineHeight-1-5em-此时-lineHeight-为多少像素"><a href="#51-某元素的-fontSize-2rem-lineHeight-1-5em-此时-lineHeight-为多少像素" class="headerlink" title="51.某元素的 fontSize: 2rem; lineHeight: 1.5em; 此时 lineHeight 为多少像素"></a>51.某元素的 fontSize: 2rem; lineHeight: 1.5em; 此时 lineHeight 为多少像素</h2><h2 id="52-Grid-布局的优势在哪里"><a href="#52-Grid-布局的优势在哪里" class="headerlink" title="52.Grid 布局的优势在哪里"></a>52.Grid 布局的优势在哪里</h2><h2 id="53-如何实现三列均分布局"><a href="#53-如何实现三列均分布局" class="headerlink" title="53.如何实现三列均分布局"></a>53.如何实现三列均分布局</h2><h3 id="1-使用-Flex"><a href="#1-使用-Flex" class="headerlink" title="1.使用 Flex"></a>1.使用 Flex</h3><h3 id="2-使用-Grid"><a href="#2-使用-Grid" class="headerlink" title="2.使用 Grid"></a>2.使用 Grid</h3><h2 id="54-什么是媒体查询，JS-可以监听媒体查询吗"><a href="#54-什么是媒体查询，JS-可以监听媒体查询吗" class="headerlink" title="54.什么是媒体查询，JS 可以监听媒体查询吗"></a>54.什么是媒体查询，JS 可以监听媒体查询吗</h2><h2 id="55-z-index-999-元素一定会置于-z-index-0-元素之上吗"><a href="#55-z-index-999-元素一定会置于-z-index-0-元素之上吗" class="headerlink" title="55.z-index: 999 元素一定会置于 z-index: 0 元素之上吗"></a>55.z-index: 999 元素一定会置于 z-index: 0 元素之上吗</h2><h2 id="56-请简介-CSS-的盒模型"><a href="#56-请简介-CSS-的盒模型" class="headerlink" title="56.请简介 CSS 的盒模型"></a>56.请简介 CSS 的盒模型</h2><h2 id="57-CSS-有哪些选择器"><a href="#57-CSS-有哪些选择器" class="headerlink" title="57.CSS 有哪些选择器"></a>57.CSS 有哪些选择器</h2><h2 id="58-CSS-有哪些伪类与伪元素选择器"><a href="#58-CSS-有哪些伪类与伪元素选择器" class="headerlink" title="58.CSS 有哪些伪类与伪元素选择器"></a>58.CSS 有哪些伪类与伪元素选择器</h2><h3 id="1-伪元素"><a href="#1-伪元素" class="headerlink" title="1.伪元素"></a>1.伪元素</h3><h3 id="2-伪类"><a href="#2-伪类" class="headerlink" title="2.伪类"></a>2.伪类</h3><h2 id="59-css-加载会阻塞-DOM-树的解析和渲染吗"><a href="#59-css-加载会阻塞-DOM-树的解析和渲染吗" class="headerlink" title="59.css 加载会阻塞 DOM 树的解析和渲染吗"></a>59.css 加载会阻塞 DOM 树的解析和渲染吗</h2><h2 id="60-在-CSS-中，使用-rem-作为单位有何缺点"><a href="#60-在-CSS-中，使用-rem-作为单位有何缺点" class="headerlink" title="60.在 CSS 中，使用 rem 作为单位有何缺点"></a>60.在 CSS 中，使用 rem 作为单位有何缺点</h2><h2 id="61-Flex-布局中的-flex-basis-与-width-有何区别"><a href="#61-Flex-布局中的-flex-basis-与-width-有何区别" class="headerlink" title="61.Flex 布局中的 flex-basis 与 width 有何区别"></a>61.Flex 布局中的 flex-basis 与 width 有何区别</h2><h2 id="62-面试官：说说你对盒子模型的理解-opens-new-window"><a href="#62-面试官：说说你对盒子模型的理解-opens-new-window" class="headerlink" title="62.面试官：说说你对盒子模型的理解?(opens new window)"></a>62.面试官：说说你对盒子模型的理解?(opens new window)</h2><h2 id="63-面试官：css选择器有哪些？优先级？哪些属性可以继承？-opens-new-window"><a href="#63-面试官：css选择器有哪些？优先级？哪些属性可以继承？-opens-new-window" class="headerlink" title="63.面试官：css选择器有哪些？优先级？哪些属性可以继承？(opens new window)"></a>63.面试官：css选择器有哪些？优先级？哪些属性可以继承？(opens new window)</h2><h2 id="64-面试官：说说em-px-rem-vh-vw区别-opens-new-window"><a href="#64-面试官：说说em-px-rem-vh-vw区别-opens-new-window" class="headerlink" title="64.面试官：说说em/px/rem/vh/vw区别?(opens new window)"></a>64.面试官：说说em/px/rem/vh/vw区别?(opens new window)</h2><h2 id="65-面试官：说说设备像素、css像素、设备独立像素、dpr、ppi-之间的区别？-opens-new-window"><a href="#65-面试官：说说设备像素、css像素、设备独立像素、dpr、ppi-之间的区别？-opens-new-window" class="headerlink" title="65.面试官：说说设备像素、css像素、设备独立像素、dpr、ppi 之间的区别？(opens new window)"></a>65.面试官：说说设备像素、css像素、设备独立像素、dpr、ppi 之间的区别？(opens new window)</h2><h2 id="66-面试官：css中，有哪些方式可以隐藏页面元素？区别-opens-new-window"><a href="#66-面试官：css中，有哪些方式可以隐藏页面元素？区别-opens-new-window" class="headerlink" title="66.面试官：css中，有哪些方式可以隐藏页面元素？区别?(opens new window)"></a>66.面试官：css中，有哪些方式可以隐藏页面元素？区别?(opens new window)</h2><h2 id="67-面试官：谈谈你对BFC的理解？-opens-new-window"><a href="#67-面试官：谈谈你对BFC的理解？-opens-new-window" class="headerlink" title="67.面试官：谈谈你对BFC的理解？(opens new window)"></a>67.面试官：谈谈你对BFC的理解？(opens new window)</h2><h2 id="68-面试官：元素水平垂直居中的方法有哪些？如果元素不定宽高呢？-opens-new-window"><a href="#68-面试官：元素水平垂直居中的方法有哪些？如果元素不定宽高呢？-opens-new-window" class="headerlink" title="68.面试官：元素水平垂直居中的方法有哪些？如果元素不定宽高呢？(opens new window)"></a>68.面试官：元素水平垂直居中的方法有哪些？如果元素不定宽高呢？(opens new window)</h2><h2 id="69-面试官：如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？-opens-new-window"><a href="#69-面试官：如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？-opens-new-window" class="headerlink" title="69.面试官：如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？(opens new window)"></a>69.面试官：如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？(opens new window)</h2><h2 id="70-面试官：说说flexbox（弹性盒布局模型）-以及适用场景？-opens-new-window"><a href="#70-面试官：说说flexbox（弹性盒布局模型）-以及适用场景？-opens-new-window" class="headerlink" title="70.面试官：说说flexbox（弹性盒布局模型）,以及适用场景？(opens new window)"></a>70.面试官：说说flexbox（弹性盒布局模型）,以及适用场景？(opens new window)</h2><h2 id="71-面试官：介绍一下grid网格布局-opens-new-window"><a href="#71-面试官：介绍一下grid网格布局-opens-new-window" class="headerlink" title="71.面试官：介绍一下grid网格布局(opens new window)"></a>71.面试官：介绍一下grid网格布局(opens new window)</h2><h2 id="72-面试官：CSS3新增了哪些新特性？-opens-new-window"><a href="#72-面试官：CSS3新增了哪些新特性？-opens-new-window" class="headerlink" title="72.面试官：CSS3新增了哪些新特性？(opens new window)"></a>72.面试官：CSS3新增了哪些新特性？(opens new window)</h2><h2 id="73-面试官：css3动画有哪些？-opens-new-window"><a href="#73-面试官：css3动画有哪些？-opens-new-window" class="headerlink" title="73.面试官：css3动画有哪些？(opens new window)"></a>73.面试官：css3动画有哪些？(opens new window)</h2><h2 id="74-面试官：怎么理解回流跟重绘？什么场景下会触发？-opens-new-window"><a href="#74-面试官：怎么理解回流跟重绘？什么场景下会触发？-opens-new-window" class="headerlink" title="74.面试官：怎么理解回流跟重绘？什么场景下会触发？(opens new window)"></a>74.面试官：怎么理解回流跟重绘？什么场景下会触发？(opens new window)</h2><h2 id="75-面试官：什么是响应式设计？响应式设计的基本原理是什么？如何做？-opens-new-window"><a href="#75-面试官：什么是响应式设计？响应式设计的基本原理是什么？如何做？-opens-new-window" class="headerlink" title="75.面试官：什么是响应式设计？响应式设计的基本原理是什么？如何做？(opens new window)"></a>75.面试官：什么是响应式设计？响应式设计的基本原理是什么？如何做？(opens new window)</h2><h2 id="76-面试官：如果要做优化，CSS提高性能的方法有哪些？-opens-new-window"><a href="#76-面试官：如果要做优化，CSS提高性能的方法有哪些？-opens-new-window" class="headerlink" title="76.面试官：如果要做优化，CSS提高性能的方法有哪些？(opens new window)"></a>76.面试官：如果要做优化，CSS提高性能的方法有哪些？(opens new window)</h2><h2 id="77-面试官：如何实现单行／多行文本溢出的省略样式？-opens-new-window"><a href="#77-面试官：如何实现单行／多行文本溢出的省略样式？-opens-new-window" class="headerlink" title="77.面试官：如何实现单行／多行文本溢出的省略样式？(opens new window)"></a>77.面试官：如何实现单行／多行文本溢出的省略样式？(opens new window)</h2><h2 id="78-面试官：如何使用css完成视差滚动效果-opens-new-window"><a href="#78-面试官：如何使用css完成视差滚动效果-opens-new-window" class="headerlink" title="78.面试官：如何使用css完成视差滚动效果?(opens new window)"></a>78.面试官：如何使用css完成视差滚动效果?(opens new window)</h2><h2 id="79-面试官：CSS如何画一个三角形？原理是什么？-opens-new-window"><a href="#79-面试官：CSS如何画一个三角形？原理是什么？-opens-new-window" class="headerlink" title="79.面试官：CSS如何画一个三角形？原理是什么？(opens new window)"></a>79.面试官：CSS如何画一个三角形？原理是什么？(opens new window)</h2><h2 id="80-面试官：让Chrome支持小于12px-的文字方式有哪些？区别？-opens-new-window"><a href="#80-面试官：让Chrome支持小于12px-的文字方式有哪些？区别？-opens-new-window" class="headerlink" title="80.面试官：让Chrome支持小于12px 的文字方式有哪些？区别？(opens new window)"></a>80.面试官：让Chrome支持小于12px 的文字方式有哪些？区别？(opens new window)</h2><h2 id="81-面试官：说说对Css预编语言的理解？有哪些区别-opens-new-window"><a href="#81-面试官：说说对Css预编语言的理解？有哪些区别-opens-new-window" class="headerlink" title="81.面试官：说说对Css预编语言的理解？有哪些区别?(opens new window)"></a>81.面试官：说说对Css预编语言的理解？有哪些区别?(opens new window)</h2><h1 id="浏览器-DOM-API-共45题"><a href="#浏览器-DOM-API-共45题" class="headerlink" title="浏览器 DOM API 共45题"></a>浏览器 DOM API 共45题</h1><h2 id="1-如何设置一个-cookie"><a href="#1-如何设置一个-cookie" class="headerlink" title="1.如何设置一个 cookie"></a>1.如何设置一个 cookie</h2><h2 id="2-如何删除一个-cookie"><a href="#2-如何删除一个-cookie" class="headerlink" title="2.如何删除一个 cookie"></a>2.如何删除一个 cookie</h2><h2 id="3-如何判断当前环境是移动端还是-PC-端"><a href="#3-如何判断当前环境是移动端还是-PC-端" class="headerlink" title="3.如何判断当前环境是移动端还是 PC 端"></a>3.如何判断当前环境是移动端还是 PC 端</h2><h2 id="4-input-中监听值的变化是在监听什么事件"><a href="#4-input-中监听值的变化是在监听什么事件" class="headerlink" title="4.input 中监听值的变化是在监听什么事件"></a>4.input 中监听值的变化是在监听什么事件</h2><h2 id="5-什么是跨域，如何解决跨域问题"><a href="#5-什么是跨域，如何解决跨域问题" class="headerlink" title="5.什么是跨域，如何解决跨域问题"></a>5.什么是跨域，如何解决跨域问题</h2><h3 id="1-跨域"><a href="#1-跨域" class="headerlink" title="1.跨域"></a>1.跨域</h3><h3 id="2-如何解决跨域"><a href="#2-如何解决跨域" class="headerlink" title="2.如何解决跨域"></a>2.如何解决跨域</h3><h2 id="6-CSP-是干什么用的了"><a href="#6-CSP-是干什么用的了" class="headerlink" title="6.CSP 是干什么用的了"></a>6.CSP 是干什么用的了</h2><h3 id="相关链接"><a href="#相关链接" class="headerlink" title="相关链接"></a>相关链接</h3><h2 id="7-prefetch-与-preload-的区别是什么"><a href="#7-prefetch-与-preload-的区别是什么" class="headerlink" title="7.prefetch 与 preload 的区别是什么"></a>7.prefetch 与 preload 的区别是什么</h2><h2 id="8-fetch-中-credentials-指什么意思，可以取什么值"><a href="#8-fetch-中-credentials-指什么意思，可以取什么值" class="headerlink" title="8.fetch 中 credentials 指什么意思，可以取什么值"></a>8.fetch 中 credentials 指什么意思，可以取什么值</h2><h2 id="9-当-cookie-没有设置-maxage-时，cookie-会存在多久"><a href="#9-当-cookie-没有设置-maxage-时，cookie-会存在多久" class="headerlink" title="9.当 cookie 没有设置 maxage 时，cookie 会存在多久"></a>9.当 cookie 没有设置 maxage 时，cookie 会存在多久</h2><h2 id="10-在浏览器中如何监听剪切板中内容"><a href="#10-在浏览器中如何监听剪切板中内容" class="headerlink" title="10.在浏览器中如何监听剪切板中内容"></a>10.在浏览器中如何监听剪切板中内容</h2><h2 id="11-js-动画和-css-动画那个性能比较好"><a href="#11-js-动画和-css-动画那个性能比较好" class="headerlink" title="11.js 动画和 css 动画那个性能比较好"></a>11.js 动画和 css 动画那个性能比较好</h2><h2 id="12-简单介绍-requestIdleCallback-及使用场景"><a href="#12-简单介绍-requestIdleCallback-及使用场景" class="headerlink" title="12.简单介绍 requestIdleCallback 及使用场景"></a>12.简单介绍 requestIdleCallback 及使用场景</h2><h2 id="13-如何找到当前页面出现次数最多的-HTML-标签"><a href="#13-如何找到当前页面出现次数最多的-HTML-标签" class="headerlink" title="13.如何找到当前页面出现次数最多的 HTML 标签"></a>13.如何找到当前页面出现次数最多的 HTML 标签</h2><h2 id="14-什么是层叠上下文-stacking-context"><a href="#14-什么是层叠上下文-stacking-context" class="headerlink" title="14.什么是层叠上下文 (stacking context)"></a>14.什么是层叠上下文 (stacking context)</h2><h2 id="15-如何把-DOM-转化为图片"><a href="#15-如何把-DOM-转化为图片" class="headerlink" title="15.如何把 DOM 转化为图片"></a>15.如何把 DOM 转化为图片</h2><h2 id="16-浏览器的剪切板中如何监听复制事件"><a href="#16-浏览器的剪切板中如何监听复制事件" class="headerlink" title="16.浏览器的剪切板中如何监听复制事件"></a>16.浏览器的剪切板中如何监听复制事件</h2><h2 id="17-JSONP-的原理是什么，如何实现"><a href="#17-JSONP-的原理是什么，如何实现" class="headerlink" title="17.JSONP 的原理是什么，如何实现"></a>17.JSONP 的原理是什么，如何实现</h2><h3 id="1-一个正常的请求-JSON"><a href="#1-一个正常的请求-JSON" class="headerlink" title="1.一个正常的请求: JSON"></a>1.一个正常的请求: JSON</h3><h3 id="2-一个-JSONP-请求"><a href="#2-一个-JSONP-请求" class="headerlink" title="2.一个 JSONP 请求"></a>2.一个 JSONP 请求</h3><h3 id="3-服务器端代码"><a href="#3-服务器端代码" class="headerlink" title="3.服务器端代码"></a>3.服务器端代码</h3><h3 id="4-完整代码附录"><a href="#4-完整代码附录" class="headerlink" title="4.完整代码附录"></a>4.完整代码附录</h3><h2 id="18-如何实现页面文本不可复制"><a href="#18-如何实现页面文本不可复制" class="headerlink" title="18.如何实现页面文本不可复制"></a>18.如何实现页面文本不可复制</h2><h2 id="19-异步加载-JS-脚本时，async-与-defer-有何区别"><a href="#19-异步加载-JS-脚本时，async-与-defer-有何区别" class="headerlink" title="19.异步加载 JS 脚本时，async 与 defer 有何区别"></a>19.异步加载 JS 脚本时，async 与 defer 有何区别</h2><h2 id="20-load-事件与-DomContentLoaded-事件的先后顺序"><a href="#20-load-事件与-DomContentLoaded-事件的先后顺序" class="headerlink" title="20.load 事件与 DomContentLoaded 事件的先后顺序"></a>20.load 事件与 DomContentLoaded 事件的先后顺序</h2><h2 id="21-React-Vue-中的-router-实现原理如何"><a href="#21-React-Vue-中的-router-实现原理如何" class="headerlink" title="21.React/Vue 中的 router 实现原理如何"></a>21.React/Vue 中的 router 实现原理如何</h2><h3 id="1-history-API"><a href="#1-history-API" class="headerlink" title="1.history API"></a>1.history API</h3><h3 id="2-hash"><a href="#2-hash" class="headerlink" title="2.hash"></a>2.hash</h3><h2 id="22-前端如何实现文件上传功能"><a href="#22-前端如何实现文件上传功能" class="headerlink" title="22.前端如何实现文件上传功能"></a>22.前端如何实现文件上传功能</h2><h2 id="23-什么是-HTML-的实体编码-HTML-Entity-Encode"><a href="#23-什么是-HTML-的实体编码-HTML-Entity-Encode" class="headerlink" title="23.什么是 HTML 的实体编码 (HTML Entity Encode)"></a>23.什么是 HTML 的实体编码 (HTML Entity Encode)</h2><h2 id="24-如何取消请求的发送"><a href="#24-如何取消请求的发送" class="headerlink" title="24.如何取消请求的发送"></a>24.如何取消请求的发送</h2><h3 id="1-XHR-使用-xhr-abort-1"><a href="#1-XHR-使用-xhr-abort-1" class="headerlink" title="1.XHR 使用 xhr.abort()"></a>1.XHR 使用 xhr.abort()</h3><h3 id="2-fetch-使用-AbortController-1"><a href="#2-fetch-使用-AbortController-1" class="headerlink" title="2.fetch 使用 AbortController"></a>2.fetch 使用 AbortController</h3><h2 id="25-DOM-中如何阻止事件默认行为，如何判断事件否可阻止？"><a href="#25-DOM-中如何阻止事件默认行为，如何判断事件否可阻止？" class="headerlink" title="25.DOM 中如何阻止事件默认行为，如何判断事件否可阻止？"></a>25.DOM 中如何阻止事件默认行为，如何判断事件否可阻止？</h2><h2 id="26-什么是事件冒泡和事件捕获"><a href="#26-什么是事件冒泡和事件捕获" class="headerlink" title="26.什么是事件冒泡和事件捕获"></a>26.什么是事件冒泡和事件捕获</h2><h2 id="27-什么是事件委托，e-currentTarget-与-e-target-有何区别"><a href="#27-什么是事件委托，e-currentTarget-与-e-target-有何区别" class="headerlink" title="27.什么是事件委托，e.currentTarget 与 e.target 有何区别"></a>27.什么是事件委托，e.currentTarget 与 e.target 有何区别</h2><h2 id="28-关于事件捕获和冒泡，以下代码输出多少"><a href="#28-关于事件捕获和冒泡，以下代码输出多少" class="headerlink" title="28.关于事件捕获和冒泡，以下代码输出多少"></a>28.关于事件捕获和冒泡，以下代码输出多少</h2><h2 id="29-浏览器中-cookie-有哪些字段"><a href="#29-浏览器中-cookie-有哪些字段" class="headerlink" title="29.浏览器中 cookie 有哪些字段"></a>29.浏览器中 cookie 有哪些字段</h2><h2 id="30-DOM-中-Element-与-Node-有何区别"><a href="#30-DOM-中-Element-与-Node-有何区别" class="headerlink" title="30.DOM 中 Element 与 Node 有何区别"></a>30.DOM 中 Element 与 Node 有何区别</h2><h2 id="31-SameSite-Cookie-有哪些值，是如何预防-CSRF-攻击的"><a href="#31-SameSite-Cookie-有哪些值，是如何预防-CSRF-攻击的" class="headerlink" title="31.SameSite Cookie 有哪些值，是如何预防 CSRF 攻击的"></a>31.SameSite Cookie 有哪些值，是如何预防 CSRF 攻击的</h2><h2 id="32-sessionStorage-与-localStorage-有何区别"><a href="#32-sessionStorage-与-localStorage-有何区别" class="headerlink" title="32.sessionStorage 与 localStorage 有何区别"></a>32.sessionStorage 与 localStorage 有何区别</h2><h2 id="33-如何设置一个支持过期时间的-localStorage"><a href="#33-如何设置一个支持过期时间的-localStorage" class="headerlink" title="33.如何设置一个支持过期时间的 localStorage"></a>33.如何设置一个支持过期时间的 localStorage</h2><h2 id="34-如何统计当前页面出现的所有标签"><a href="#34-如何统计当前页面出现的所有标签" class="headerlink" title="34.如何统计当前页面出现的所有标签"></a>34.如何统计当前页面出现的所有标签</h2><h2 id="35-如何监听-localStorage-的变动"><a href="#35-如何监听-localStorage-的变动" class="headerlink" title="35.如何监听 localStorage 的变动"></a>35.如何监听 localStorage 的变动</h2><h2 id="36-Data-URL-的应用场景及如何生成"><a href="#36-Data-URL-的应用场景及如何生成" class="headerlink" title="36.Data URL 的应用场景及如何生成"></a>36.Data URL 的应用场景及如何生成</h2><h2 id="37-浏览器中事件有哪些属性与方法"><a href="#37-浏览器中事件有哪些属性与方法" class="headerlink" title="37.浏览器中事件有哪些属性与方法"></a>37.浏览器中事件有哪些属性与方法</h2><h2 id="38-浏览器中如何读取二进制信息"><a href="#38-浏览器中如何读取二进制信息" class="headerlink" title="38.浏览器中如何读取二进制信息"></a>38.浏览器中如何读取二进制信息</h2><h2 id="39-React-中监听-input-的-onChange-事件的原生事件是什么"><a href="#39-React-中监听-input-的-onChange-事件的原生事件是什么" class="headerlink" title="39.React 中监听 input 的 onChange 事件的原生事件是什么"></a>39.React 中监听 input 的 onChange 事件的原生事件是什么</h2><h2 id="40-在浏览器中点击-a-标签保存为文件如何做"><a href="#40-在浏览器中点击-a-标签保存为文件如何做" class="headerlink" title="40.在浏览器中点击 a 标签保存为文件如何做"></a>40.在浏览器中点击 a 标签保存为文件如何做</h2><h2 id="41-如何禁止打开浏览器控制台"><a href="#41-如何禁止打开浏览器控制台" class="headerlink" title="41.如何禁止打开浏览器控制台"></a>41.如何禁止打开浏览器控制台</h2><h2 id="42-简述下-WebWorker，它如何进行通信"><a href="#42-简述下-WebWorker，它如何进行通信" class="headerlink" title="42.简述下 WebWorker，它如何进行通信"></a>42.简述下 WebWorker，它如何进行通信</h2><h2 id="43-浏览器中监听事件函数-addEventListener-第三个参数有那些值"><a href="#43-浏览器中监听事件函数-addEventListener-第三个参数有那些值" class="headerlink" title="43.浏览器中监听事件函数 addEventListener 第三个参数有那些值"></a>43.浏览器中监听事件函数 addEventListener 第三个参数有那些值</h2><h2 id="44-浏览器中-Frame-与-Event-Loop-的关系是什么"><a href="#44-浏览器中-Frame-与-Event-Loop-的关系是什么" class="headerlink" title="44.浏览器中 Frame 与 Event Loop 的关系是什么"></a>44.浏览器中 Frame 与 Event Loop 的关系是什么</h2><h2 id="45-浏览器中如何使用原生的-ESM"><a href="#45-浏览器中如何使用原生的-ESM" class="headerlink" title="45.浏览器中如何使用原生的 ESM"></a>45.浏览器中如何使用原生的 ESM</h2><h3 id="1-ImportMap"><a href="#1-ImportMap" class="headerlink" title="1.ImportMap"></a>1.ImportMap</h3><h3 id="2-Import-Assertion"><a href="#2-Import-Assertion" class="headerlink" title="2.Import Assertion"></a>2.Import Assertion</h3><h1 id="JavaScript系列-共167题"><a href="#JavaScript系列-共167题" class="headerlink" title="JavaScript系列 共167题"></a>JavaScript系列 共167题</h1><h2 id="1-面试官：说说Javascript中的数据类型？区别？"><a href="#1-面试官：说说Javascript中的数据类型？区别？" class="headerlink" title="1.面试官：说说Javascript中的数据类型？区别？"></a>1.面试官：说说Javascript中的数据类型？区别？</h2><h2 id="2-面试官：Javscript数组的常用方法有哪些？"><a href="#2-面试官：Javscript数组的常用方法有哪些？" class="headerlink" title="2.面试官：Javscript数组的常用方法有哪些？"></a>2.面试官：Javscript数组的常用方法有哪些？</h2><h2 id="3-面试官：Javascript字符串的常用方法有哪些？"><a href="#3-面试官：Javascript字符串的常用方法有哪些？" class="headerlink" title="3.面试官：Javascript字符串的常用方法有哪些？"></a>3.面试官：Javascript字符串的常用方法有哪些？</h2><h2 id="4-面试官：谈谈-Javascript-中的类型转换机制"><a href="#4-面试官：谈谈-Javascript-中的类型转换机制" class="headerlink" title="4.面试官：谈谈 Javascript 中的类型转换机制"></a>4.面试官：谈谈 Javascript 中的类型转换机制</h2><h2 id="5-面试官：-和-区别，分别在什么情况使用"><a href="#5-面试官：-和-区别，分别在什么情况使用" class="headerlink" title="5.面试官：== 和 ===区别，分别在什么情况使用"></a>5.面试官：== 和 ===区别，分别在什么情况使用</h2><h2 id="6-面试官：深拷贝浅拷贝的区别？如何实现一个深拷贝？"><a href="#6-面试官：深拷贝浅拷贝的区别？如何实现一个深拷贝？" class="headerlink" title="6.面试官：深拷贝浅拷贝的区别？如何实现一个深拷贝？"></a>6.面试官：深拷贝浅拷贝的区别？如何实现一个深拷贝？</h2><h2 id="7-面试官：说说你对闭包的理解"><a href="#7-面试官：说说你对闭包的理解" class="headerlink" title="7.面试官：说说你对闭包的理解"></a>7.面试官：说说你对闭包的理解</h2><h2 id="8-面试官：说说你对作用域链的理解"><a href="#8-面试官：说说你对作用域链的理解" class="headerlink" title="8.面试官：说说你对作用域链的理解"></a>8.面试官：说说你对作用域链的理解</h2><h2 id="9-面试官：JavaScript原型，原型链-有什么特点？"><a href="#9-面试官：JavaScript原型，原型链-有什么特点？" class="headerlink" title="9.面试官：JavaScript原型，原型链 ? 有什么特点？"></a>9.面试官：JavaScript原型，原型链 ? 有什么特点？</h2><h2 id="10-面试官：Javascript如何实现继承？"><a href="#10-面试官：Javascript如何实现继承？" class="headerlink" title="10.面试官：Javascript如何实现继承？"></a>10.面试官：Javascript如何实现继承？</h2><h2 id="11-面试官：谈谈this对象的理解"><a href="#11-面试官：谈谈this对象的理解" class="headerlink" title="11.面试官：谈谈this对象的理解"></a>11.面试官：谈谈this对象的理解</h2><h2 id="12-面试官：JavaScript中执行上下文和执行栈是什么？"><a href="#12-面试官：JavaScript中执行上下文和执行栈是什么？" class="headerlink" title="12.面试官：JavaScript中执行上下文和执行栈是什么？"></a>12.面试官：JavaScript中执行上下文和执行栈是什么？</h2><h2 id="13-面试官：说说JavaScript中的事件模型"><a href="#13-面试官：说说JavaScript中的事件模型" class="headerlink" title="13.面试官：说说JavaScript中的事件模型"></a>13.面试官：说说JavaScript中的事件模型</h2><h2 id="14-面试官：typeof-与-instanceof-区别"><a href="#14-面试官：typeof-与-instanceof-区别" class="headerlink" title="14.面试官：typeof 与 instanceof 区别"></a>14.面试官：typeof 与 instanceof 区别</h2><h2 id="15-面试官：解释下什么是事件代理？应用场景？"><a href="#15-面试官：解释下什么是事件代理？应用场景？" class="headerlink" title="15.面试官：解释下什么是事件代理？应用场景？"></a>15.面试官：解释下什么是事件代理？应用场景？</h2><h2 id="16-面试官：说说new操作符具体干了什么？"><a href="#16-面试官：说说new操作符具体干了什么？" class="headerlink" title="16.面试官：说说new操作符具体干了什么？"></a>16.面试官：说说new操作符具体干了什么？</h2><h2 id="17-面试官：ajax原理是什么？如何实现？"><a href="#17-面试官：ajax原理是什么？如何实现？" class="headerlink" title="17.面试官：ajax原理是什么？如何实现？"></a>17.面试官：ajax原理是什么？如何实现？</h2><h2 id="18-面试官：bind、call、apply-区别？如何实现一个bind"><a href="#18-面试官：bind、call、apply-区别？如何实现一个bind" class="headerlink" title="18.面试官：bind、call、apply 区别？如何实现一个bind?"></a>18.面试官：bind、call、apply 区别？如何实现一个bind?</h2><h2 id="19-面试官：说说你对正则表达式的理解？应用场景？"><a href="#19-面试官：说说你对正则表达式的理解？应用场景？" class="headerlink" title="19.面试官：说说你对正则表达式的理解？应用场景？"></a>19.面试官：说说你对正则表达式的理解？应用场景？</h2><h2 id="20-面试官：说说你对事件循环的理解"><a href="#20-面试官：说说你对事件循环的理解" class="headerlink" title="20.面试官：说说你对事件循环的理解"></a>20.面试官：说说你对事件循环的理解</h2><h2 id="21-面试官：DOM常见的操作有哪些？"><a href="#21-面试官：DOM常见的操作有哪些？" class="headerlink" title="21.面试官：DOM常见的操作有哪些？"></a>21.面试官：DOM常见的操作有哪些？</h2><h2 id="22-面试官：说说你对BOM的理解，常见的BOM对象你了解哪些？"><a href="#22-面试官：说说你对BOM的理解，常见的BOM对象你了解哪些？" class="headerlink" title="22.面试官：说说你对BOM的理解，常见的BOM对象你了解哪些？"></a>22.面试官：说说你对BOM的理解，常见的BOM对象你了解哪些？</h2><h2 id="23-面试官：举例说明你对尾递归的理解，有哪些应用场景"><a href="#23-面试官：举例说明你对尾递归的理解，有哪些应用场景" class="headerlink" title="23.面试官：举例说明你对尾递归的理解，有哪些应用场景"></a>23.面试官：举例说明你对尾递归的理解，有哪些应用场景</h2><h2 id="24-面试官：说说-JavaScript-中内存泄漏的几种情况？"><a href="#24-面试官：说说-JavaScript-中内存泄漏的几种情况？" class="headerlink" title="24.面试官：说说 JavaScript 中内存泄漏的几种情况？"></a>24.面试官：说说 JavaScript 中内存泄漏的几种情况？</h2><h2 id="25-面试官：Javascript本地存储的方式有哪些？区别及应用场景？"><a href="#25-面试官：Javascript本地存储的方式有哪些？区别及应用场景？" class="headerlink" title="25.面试官：Javascript本地存储的方式有哪些？区别及应用场景？"></a>25.面试官：Javascript本地存储的方式有哪些？区别及应用场景？</h2><h2 id="26-面试官：说说你对函数式编程的理解？优缺点？"><a href="#26-面试官：说说你对函数式编程的理解？优缺点？" class="headerlink" title="26.面试官：说说你对函数式编程的理解？优缺点？"></a>26.面试官：说说你对函数式编程的理解？优缺点？</h2><h2 id="27-面试官：Javascript中如何实现函数缓存？函数缓存有哪些应用场景？"><a href="#27-面试官：Javascript中如何实现函数缓存？函数缓存有哪些应用场景？" class="headerlink" title="27.面试官：Javascript中如何实现函数缓存？函数缓存有哪些应用场景？"></a>27.面试官：Javascript中如何实现函数缓存？函数缓存有哪些应用场景？</h2><h2 id="28-面试官：说说-Javascript-数字精度丢失的问题，如何解决？"><a href="#28-面试官：说说-Javascript-数字精度丢失的问题，如何解决？" class="headerlink" title="28.面试官：说说 Javascript 数字精度丢失的问题，如何解决？"></a>28.面试官：说说 Javascript 数字精度丢失的问题，如何解决？</h2><h2 id="29-面试官：什么是防抖和节流？有什么区别？如何实现？-opens-new-window"><a href="#29-面试官：什么是防抖和节流？有什么区别？如何实现？-opens-new-window" class="headerlink" title="29.面试官：什么是防抖和节流？有什么区别？如何实现？(opens new window)"></a>29.面试官：什么是防抖和节流？有什么区别？如何实现？(opens new window)</h2><h2 id="30-面试官：如何判断一个元素是否在可视区域中？-opens-new-window"><a href="#30-面试官：如何判断一个元素是否在可视区域中？-opens-new-window" class="headerlink" title="30.面试官：如何判断一个元素是否在可视区域中？(opens new window)"></a>30.面试官：如何判断一个元素是否在可视区域中？(opens new window)</h2><h2 id="31-面试官：大文件上传如何做断点续传？-opens-new-window"><a href="#31-面试官：大文件上传如何做断点续传？-opens-new-window" class="headerlink" title="31.面试官：大文件上传如何做断点续传？(opens new window)"></a>31.面试官：大文件上传如何做断点续传？(opens new window)</h2><h2 id="32-面试官：如何实现上拉加载，下拉刷新？-opens-new-window"><a href="#32-面试官：如何实现上拉加载，下拉刷新？-opens-new-window" class="headerlink" title="32.面试官：如何实现上拉加载，下拉刷新？(opens new window)"></a>32.面试官：如何实现上拉加载，下拉刷新？(opens new window)</h2><h2 id="33-面试官：什么是单点登录？如何实现？-opens-new-window"><a href="#33-面试官：什么是单点登录？如何实现？-opens-new-window" class="headerlink" title="33.面试官：什么是单点登录？如何实现？(opens new window)"></a>33.面试官：什么是单点登录？如何实现？(opens new window)</h2><h2 id="34-面试官：web常见的攻击方式有哪些？如何防御？-opens-new-window"><a href="#34-面试官：web常见的攻击方式有哪些？如何防御？-opens-new-window" class="headerlink" title="34.面试官：web常见的攻击方式有哪些？如何防御？(opens new window)"></a>34.面试官：web常见的攻击方式有哪些？如何防御？(opens new window)</h2><h2 id="35-如何实现一个简单的-Promise"><a href="#35-如何实现一个简单的-Promise" class="headerlink" title="35.如何实现一个简单的 Promise"></a>35.如何实现一个简单的 Promise</h2><h2 id="36-在前端开发中，如何获取浏览器的唯一标识"><a href="#36-在前端开发中，如何获取浏览器的唯一标识" class="headerlink" title="36.在前端开发中，如何获取浏览器的唯一标识"></a>36.在前端开发中，如何获取浏览器的唯一标识</h2><h3 id="简答"><a href="#简答" class="headerlink" title="简答"></a>简答</h3><h2 id="37-js-中如何实现-bind"><a href="#37-js-中如何实现-bind" class="headerlink" title="37.js 中如何实现 bind"></a>37.js 中如何实现 bind</h2><h2 id="38-js-中什么是-softbind，如何实现"><a href="#38-js-中什么是-softbind，如何实现" class="headerlink" title="38.js 中什么是 softbind，如何实现"></a>38.js 中什么是 softbind，如何实现</h2><h2 id="39-如何实现-promise-map，限制-promise-并发数"><a href="#39-如何实现-promise-map，限制-promise-并发数" class="headerlink" title="39.如何实现 promise.map，限制 promise 并发数"></a>39.如何实现 promise.map，限制 promise 并发数</h2><h2 id="40-有没有用-npm-发布过-package，如何发布"><a href="#40-有没有用-npm-发布过-package，如何发布" class="headerlink" title="40.有没有用 npm 发布过 package，如何发布"></a>40.有没有用 npm 发布过 package，如何发布</h2><h3 id="1-步骤"><a href="#1-步骤" class="headerlink" title="1.步骤"></a>1.步骤</h3><h3 id="2-其他"><a href="#2-其他" class="headerlink" title="2.其他"></a>2.其他</h3><h2 id="41-js-代码压缩-minify-的原理是什么"><a href="#41-js-代码压缩-minify-的原理是什么" class="headerlink" title="41.js 代码压缩 minify 的原理是什么"></a>41.js 代码压缩 minify 的原理是什么</h2><h3 id="1-去除多余字符-空格，换行及注释"><a href="#1-去除多余字符-空格，换行及注释" class="headerlink" title="1.去除多余字符: 空格，换行及注释"></a>1.去除多余字符: 空格，换行及注释</h3><h3 id="2-压缩变量名：变量名，函数名及属性名"><a href="#2-压缩变量名：变量名，函数名及属性名" class="headerlink" title="2.压缩变量名：变量名，函数名及属性名"></a>2.压缩变量名：变量名，函数名及属性名</h3><h3 id="3-解析程序逻辑：合并声明以及布尔值简化"><a href="#3-解析程序逻辑：合并声明以及布尔值简化" class="headerlink" title="3.解析程序逻辑：合并声明以及布尔值简化"></a>3.解析程序逻辑：合并声明以及布尔值简化</h3><h3 id="4-解析程序逻辑-编译预计算"><a href="#4-解析程序逻辑-编译预计算" class="headerlink" title="4.解析程序逻辑: 编译预计算"></a>4.解析程序逻辑: 编译预计算</h3><h2 id="42-关于-JSON，以下代码输出什么"><a href="#42-关于-JSON，以下代码输出什么" class="headerlink" title="42.关于 JSON，以下代码输出什么"></a>42.关于 JSON，以下代码输出什么</h2><h2 id="43-什么是-CSRF-攻击"><a href="#43-什么是-CSRF-攻击" class="headerlink" title="43.什么是 CSRF 攻击"></a>43.什么是 CSRF 攻击</h2><h2 id="44-在-js-中如何把类数组转化为数组"><a href="#44-在-js-中如何把类数组转化为数组" class="headerlink" title="44.在 js 中如何把类数组转化为数组"></a>44.在 js 中如何把类数组转化为数组</h2><h3 id="1-ES6"><a href="#1-ES6" class="headerlink" title="1.ES6+"></a>1.ES6+</h3><h3 id="2-ES5"><a href="#2-ES5" class="headerlink" title="2.ES5"></a>2.ES5</h3><h3 id="3-稀疏数组-sparse-array"><a href="#3-稀疏数组-sparse-array" class="headerlink" title="3.稀疏数组 (sparse array)"></a>3.稀疏数组 (sparse array)</h3><h3 id="4-总结"><a href="#4-总结" class="headerlink" title="4.总结"></a>4.总结</h3><h2 id="45-Array-100-map-x-gt-1-结果是多少"><a href="#45-Array-100-map-x-gt-1-结果是多少" class="headerlink" title="45.Array(100).map(x =&gt; 1) 结果是多少"></a>45.Array(100).map(x =&gt; 1) 结果是多少</h2><h2 id="46-如何在-url-中传递数组"><a href="#46-如何在-url-中传递数组" class="headerlink" title="46.如何在 url 中传递数组"></a>46.如何在 url 中传递数组</h2><h2 id="47-如何实现-compose-函数，进行函数合成"><a href="#47-如何实现-compose-函数，进行函数合成" class="headerlink" title="47.如何实现 compose 函数，进行函数合成"></a>47.如何实现 compose 函数，进行函数合成</h2><h2 id="48-前端中遇到过处理二进制的场景吗"><a href="#48-前端中遇到过处理二进制的场景吗" class="headerlink" title="48.前端中遇到过处理二进制的场景吗"></a>48.前端中遇到过处理二进制的场景吗</h2><h2 id="49-什么是-TypedArray"><a href="#49-什么是-TypedArray" class="headerlink" title="49.什么是 TypedArray"></a>49.什么是 TypedArray</h2><h2 id="50-如何实现类似-lodash-get-函数"><a href="#50-如何实现类似-lodash-get-函数" class="headerlink" title="50.如何实现类似 lodash.get 函数"></a>50.如何实现类似 lodash.get 函数</h2><h2 id="51-js-中什么是可选链操作符，如何访问数组"><a href="#51-js-中什么是可选链操作符，如何访问数组" class="headerlink" title="51.js 中什么是可选链操作符，如何访问数组"></a>51.js 中什么是可选链操作符，如何访问数组</h2><h2 id="52-如何实现一个深拷贝-cloneDeep"><a href="#52-如何实现一个深拷贝-cloneDeep" class="headerlink" title="52.如何实现一个深拷贝 (cloneDeep)"></a>52.如何实现一个深拷贝 (cloneDeep)</h2><h2 id="53-什么是跨域，如何解决跨域问题"><a href="#53-什么是跨域，如何解决跨域问题" class="headerlink" title="53.什么是跨域，如何解决跨域问题"></a>53.什么是跨域，如何解决跨域问题</h2><h3 id="1-跨域-1"><a href="#1-跨域-1" class="headerlink" title="1.跨域"></a>1.跨域</h3><h3 id="2-如何解决跨域-1"><a href="#2-如何解决跨域-1" class="headerlink" title="2.如何解决跨域"></a>2.如何解决跨域</h3><h2 id="54-请简述一下-event-loop"><a href="#54-请简述一下-event-loop" class="headerlink" title="54.请简述一下 event loop"></a>54.请简述一下 event loop</h2><h2 id="55-如何实现一个-flatMap-函数-头条"><a href="#55-如何实现一个-flatMap-函数-头条" class="headerlink" title="55.如何实现一个 flatMap 函数 (头条)"></a>55.如何实现一个 flatMap 函数 (头条)</h2><h2 id="56-如何裁剪图片-情景：选择头像"><a href="#56-如何裁剪图片-情景：选择头像" class="headerlink" title="56.如何裁剪图片 (情景：选择头像)"></a>56.如何裁剪图片 (情景：选择头像)</h2><h2 id="57-如何实现一个-async-await"><a href="#57-如何实现一个-async-await" class="headerlink" title="57.如何实现一个 async/await"></a>57.如何实现一个 async/await</h2><h2 id="58-如何使用-async-await-实现-Promise-all-的效果"><a href="#58-如何使用-async-await-实现-Promise-all-的效果" class="headerlink" title="58.如何使用 async/await 实现 Promise.all 的效果"></a>58.如何使用 async/await 实现 Promise.all 的效果</h2><h2 id="59-有没有遇到-js-捕捉不到异常堆栈信息的情况"><a href="#59-有没有遇到-js-捕捉不到异常堆栈信息的情况" class="headerlink" title="59.有没有遇到 js 捕捉不到异常堆栈信息的情况"></a>59.有没有遇到 js 捕捉不到异常堆栈信息的情况</h2><h2 id="60-有没有用过-Promise-allSettled-，它是干什么的"><a href="#60-有没有用过-Promise-allSettled-，它是干什么的" class="headerlink" title="60.有没有用过 Promise.allSettled() ，它是干什么的"></a>60.有没有用过 Promise.allSettled() ，它是干什么的</h2><h2 id="61-使用-js-实现一个-lru-cache"><a href="#61-使用-js-实现一个-lru-cache" class="headerlink" title="61.使用 js 实现一个 lru cache"></a>61.使用 js 实现一个 lru cache</h2><h2 id="62-cookie-有哪些字段"><a href="#62-cookie-有哪些字段" class="headerlink" title="62.cookie 有哪些字段"></a>62.cookie 有哪些字段</h2><h2 id="63-你们项目的测试覆盖率是怎么做的"><a href="#63-你们项目的测试覆盖率是怎么做的" class="headerlink" title="63.你们项目的测试覆盖率是怎么做的"></a>63.你们项目的测试覆盖率是怎么做的</h2><h2 id="64-bind-与-call-apply-的区别是什么"><a href="#64-bind-与-call-apply-的区别是什么" class="headerlink" title="64.bind 与 call/apply 的区别是什么"></a>64.bind 与 call/apply 的区别是什么</h2><h2 id="65-如何查看你们-JS-项目中应采用的-node-版本"><a href="#65-如何查看你们-JS-项目中应采用的-node-版本" class="headerlink" title="65.如何查看你们 JS 项目中应采用的 node 版本"></a>65.如何查看你们 JS 项目中应采用的 node 版本</h2><h2 id="66-有没有做过裁剪头像图片的需求，如何实现"><a href="#66-有没有做过裁剪头像图片的需求，如何实现" class="headerlink" title="66.有没有做过裁剪头像图片的需求，如何实现"></a>66.有没有做过裁剪头像图片的需求，如何实现</h2><h2 id="67-简述-node-v8-中的垃圾回收机制"><a href="#67-简述-node-v8-中的垃圾回收机制" class="headerlink" title="67.简述 node/v8 中的垃圾回收机制"></a>67.简述 node/v8 中的垃圾回收机制</h2><h2 id="68-fetch-中-credentials-指什么意思，可以取什么值"><a href="#68-fetch-中-credentials-指什么意思，可以取什么值" class="headerlink" title="68.fetch 中 credentials 指什么意思，可以取什么值"></a>68.fetch 中 credentials 指什么意思，可以取什么值</h2><h2 id="69-如何删除项目中没有使用到的-package"><a href="#69-如何删除项目中没有使用到的-package" class="headerlink" title="69.如何删除项目中没有使用到的 package"></a>69.如何删除项目中没有使用到的 package</h2><h2 id="70-如何实现-Promise-race"><a href="#70-如何实现-Promise-race" class="headerlink" title="70.如何实现 Promise.race"></a>70.如何实现 Promise.race</h2><h2 id="71-js-中在-new-的时候发生了什么"><a href="#71-js-中在-new-的时候发生了什么" class="headerlink" title="71.js 中在 new 的时候发生了什么"></a>71.js 中在 new 的时候发生了什么</h2><h2 id="72-什么是-Iterable-对象，与-Array-有什么区别"><a href="#72-什么是-Iterable-对象，与-Array-有什么区别" class="headerlink" title="72.什么是 Iterable 对象，与 Array 有什么区别"></a>72.什么是 Iterable 对象，与 Array 有什么区别</h2><h2 id="73-js-如何全部替代一个子串为另一个子串"><a href="#73-js-如何全部替代一个子串为另一个子串" class="headerlink" title="73.js 如何全部替代一个子串为另一个子串"></a>73.js 如何全部替代一个子串为另一个子串</h2><h3 id="总结-及直接答案"><a href="#总结-及直接答案" class="headerlink" title="总结(及直接答案)"></a>总结(及直接答案)</h3><h2 id="74-在-js-中如何实现继承"><a href="#74-在-js-中如何实现继承" class="headerlink" title="74.在 js 中如何实现继承"></a>74.在 js 中如何实现继承</h2><h3 id="1-class-extends"><a href="#1-class-extends" class="headerlink" title="1.class/extends"></a>1.class/extends</h3><h3 id="2-function-new"><a href="#2-function-new" class="headerlink" title="2.function/new"></a>2.function/new</h3><h2 id="75-python-中的-self-与-javascript-中的-this-有何不同"><a href="#75-python-中的-self-与-javascript-中的-this-有何不同" class="headerlink" title="75.python 中的 self 与 javascript 中的 this 有何不同"></a>75.python 中的 self 与 javascript 中的 this 有何不同</h2><h2 id="76-以下输出顺序多少-setTimeout-与-promise-顺序"><a href="#76-以下输出顺序多少-setTimeout-与-promise-顺序" class="headerlink" title="76.以下输出顺序多少 (setTimeout 与 promise 顺序)"></a>76.以下输出顺序多少 (setTimeout 与 promise 顺序)</h2><h2 id="77-实现一个-once-函数，记忆返回结果只执行一次"><a href="#77-实现一个-once-函数，记忆返回结果只执行一次" class="headerlink" title="77.实现一个 once 函数，记忆返回结果只执行一次"></a>77.实现一个 once 函数，记忆返回结果只执行一次</h2><h2 id="78-如何实现一个函数-isPlainObject-判断是否为纯对象"><a href="#78-如何实现一个函数-isPlainObject-判断是否为纯对象" class="headerlink" title="78.如何实现一个函数 isPlainObject 判断是否为纯对象"></a>78.如何实现一个函数 isPlainObject 判断是否为纯对象</h2><h2 id="79-如何实现一个无限累加的-sum-函数"><a href="#79-如何实现一个无限累加的-sum-函数" class="headerlink" title="79.如何实现一个无限累加的 sum 函数"></a>79.如何实现一个无限累加的 sum 函数</h2><h2 id="80-JS-如何实现一个同步的-sleep-函数"><a href="#80-JS-如何实现一个同步的-sleep-函数" class="headerlink" title="80.JS 如何实现一个同步的 sleep 函数"></a>80.JS 如何实现一个同步的 sleep 函数</h2><h2 id="81-实现一个函数用来解析-URL-的-querystring"><a href="#81-实现一个函数用来解析-URL-的-querystring" class="headerlink" title="81.实现一个函数用来解析 URL 的 querystring"></a>81.实现一个函数用来解析 URL 的 querystring</h2><h2 id="82-JS-如何实现一个-sleep-delay-函数"><a href="#82-JS-如何实现一个-sleep-delay-函数" class="headerlink" title="82.JS 如何实现一个 sleep/delay 函数"></a>82.JS 如何实现一个 sleep/delay 函数</h2><h2 id="83-如何实现一个-sample-函数，从数组中随机取一个元素"><a href="#83-如何实现一个-sample-函数，从数组中随机取一个元素" class="headerlink" title="83.如何实现一个 sample 函数，从数组中随机取一个元素"></a>83.如何实现一个 sample 函数，从数组中随机取一个元素</h2><h2 id="84-浏览器的剪切板中如何监听复制事件"><a href="#84-浏览器的剪切板中如何监听复制事件" class="headerlink" title="84.浏览器的剪切板中如何监听复制事件"></a>84.浏览器的剪切板中如何监听复制事件</h2><h2 id="85-实现一个函数用来对-URL-的-querystring-进行编码"><a href="#85-实现一个函数用来对-URL-的-querystring-进行编码" class="headerlink" title="85.实现一个函数用来对 URL 的 querystring 进行编码"></a>85.实现一个函数用来对 URL 的 querystring 进行编码</h2><h2 id="86-v8-是如何执行一段-JS-代码的"><a href="#86-v8-是如何执行一段-JS-代码的" class="headerlink" title="86.v8 是如何执行一段 JS 代码的"></a>86.v8 是如何执行一段 JS 代码的</h2><h2 id="87-实现一个数组扁平化的函数-flatten"><a href="#87-实现一个数组扁平化的函数-flatten" class="headerlink" title="87.实现一个数组扁平化的函数 flatten"></a>87.实现一个数组扁平化的函数 flatten</h2><h2 id="88-介绍-CSS-隐藏页面中某个元素的几种方法"><a href="#88-介绍-CSS-隐藏页面中某个元素的几种方法" class="headerlink" title="88.介绍 CSS 隐藏页面中某个元素的几种方法"></a>88.介绍 CSS 隐藏页面中某个元素的几种方法</h2><h3 id="1-display-none-1"><a href="#1-display-none-1" class="headerlink" title="1.display: none"></a>1.display: none</h3><h3 id="2-opacity-0-1"><a href="#2-opacity-0-1" class="headerlink" title="2.opacity: 0"></a>2.opacity: 0</h3><h3 id="3-visibility-hidden-1"><a href="#3-visibility-hidden-1" class="headerlink" title="3.visibility: hidden"></a>3.visibility: hidden</h3><h3 id="4-content-visibility-1"><a href="#4-content-visibility-1" class="headerlink" title="4.content-visibility"></a>4.content-visibility</h3><h3 id="5-绝对定位于当前页面的不可见位置-1"><a href="#5-绝对定位于当前页面的不可见位置-1" class="headerlink" title="5.绝对定位于当前页面的不可见位置"></a>5.绝对定位于当前页面的不可见位置</h3><h3 id="6-字体大小设置为-0-1"><a href="#6-字体大小设置为-0-1" class="headerlink" title="6.字体大小设置为 0"></a>6.字体大小设置为 0</h3><h2 id="89-实现一个数组去重函数-unique"><a href="#89-实现一个数组去重函数-unique" class="headerlink" title="89.实现一个数组去重函数 unique"></a>89.实现一个数组去重函数 unique</h2><h2 id="90-如何实现页面文本不可复制"><a href="#90-如何实现页面文本不可复制" class="headerlink" title="90.如何实现页面文本不可复制"></a>90.如何实现页面文本不可复制</h2><h2 id="91-如何实现一个数组洗牌函数-shuffle"><a href="#91-如何实现一个数组洗牌函数-shuffle" class="headerlink" title="91.如何实现一个数组洗牌函数 shuffle"></a>91.如何实现一个数组洗牌函数 shuffle</h2><h2 id="92-异步加载-JS-脚本时，async-与-defer-有何区别"><a href="#92-异步加载-JS-脚本时，async-与-defer-有何区别" class="headerlink" title="92.异步加载 JS 脚本时，async 与 defer 有何区别"></a>92.异步加载 JS 脚本时，async 与 defer 有何区别</h2><h2 id="93-vue3-中，如何监听数组的变化"><a href="#93-vue3-中，如何监听数组的变化" class="headerlink" title="93.vue3 中，如何监听数组的变化"></a>93.vue3 中，如何监听数组的变化</h2><h2 id="94-现代框架如-React、Vue-相比原生开发有什么优势"><a href="#94-现代框架如-React、Vue-相比原生开发有什么优势" class="headerlink" title="94.现代框架如 React、Vue 相比原生开发有什么优势"></a>94.现代框架如 React、Vue 相比原生开发有什么优势</h2><h2 id="95-typeof-与-instanceof-的区别"><a href="#95-typeof-与-instanceof-的区别" class="headerlink" title="95.typeof 与 instanceof 的区别"></a>95.typeof 与 instanceof 的区别</h2><h2 id="96-JS-如何翻转一个字符串"><a href="#96-JS-如何翻转一个字符串" class="headerlink" title="96.JS 如何翻转一个字符串"></a>96.JS 如何翻转一个字符串</h2><h2 id="97-前端如何实现文件上传功能"><a href="#97-前端如何实现文件上传功能" class="headerlink" title="97.前端如何实现文件上传功能"></a>97.前端如何实现文件上传功能</h2><h2 id="98-关于模块化，什么是-amd-和-umd"><a href="#98-关于模块化，什么是-amd-和-umd" class="headerlink" title="98.关于模块化，什么是 amd 和 umd"></a>98.关于模块化，什么是 amd 和 umd</h2><h2 id="99-简单介绍以下浏览器中的-module"><a href="#99-简单介绍以下浏览器中的-module" class="headerlink" title="99.简单介绍以下浏览器中的 module"></a>99.简单介绍以下浏览器中的 module</h2><h2 id="100-什么是-commonjs2"><a href="#100-什么是-commonjs2" class="headerlink" title="100.什么是 commonjs2"></a>100.什么是 commonjs2</h2><h2 id="101-前端上传文件时如何读取文件内容"><a href="#101-前端上传文件时如何读取文件内容" class="headerlink" title="101.前端上传文件时如何读取文件内容"></a>101.前端上传文件时如何读取文件内容</h2><h3 id="1-FileReader-API"><a href="#1-FileReader-API" class="headerlink" title="1.FileReader API"></a>1.FileReader API</h3><h3 id="2-Response-API"><a href="#2-Response-API" class="headerlink" title="2.Response API"></a>2.Response API</h3><h2 id="102-你最喜欢的三个-js-库是什么"><a href="#102-你最喜欢的三个-js-库是什么" class="headerlink" title="102.你最喜欢的三个 js 库是什么"></a>102.你最喜欢的三个 js 库是什么</h2><h3 id="1-next"><a href="#1-next" class="headerlink" title="1.next"></a>1.next</h3><h3 id="2-swr"><a href="#2-swr" class="headerlink" title="2.swr"></a>2.swr</h3><h3 id="3-graphql"><a href="#3-graphql" class="headerlink" title="3.graphql"></a>3.graphql</h3><h2 id="103-现代化前端框架中如何进行调试"><a href="#103-现代化前端框架中如何进行调试" class="headerlink" title="103.现代化前端框架中如何进行调试"></a>103.现代化前端框架中如何进行调试</h2><h2 id="104-如何实现一个函数-lodash-merge"><a href="#104-如何实现一个函数-lodash-merge" class="headerlink" title="104.如何实现一个函数 lodash.merge"></a>104.如何实现一个函数 lodash.merge</h2><h2 id="105-如何实现一个-promise-any"><a href="#105-如何实现一个-promise-any" class="headerlink" title="105.如何实现一个 promise.any"></a>105.如何实现一个 promise.any</h2><h2 id="106-如何实现一个-Promise-all"><a href="#106-如何实现一个-Promise-all" class="headerlink" title="106.如何实现一个 Promise.all"></a>106.如何实现一个 Promise.all</h2><h2 id="107-如何过滤数组中的-falsy-value"><a href="#107-如何过滤数组中的-falsy-value" class="headerlink" title="107.如何过滤数组中的 falsy value"></a>107.如何过滤数组中的 falsy value</h2><h2 id="108-如何把一个数组随机打乱"><a href="#108-如何把一个数组随机打乱" class="headerlink" title="108.如何把一个数组随机打乱"></a>108.如何把一个数组随机打乱</h2><h2 id="109-JS-中基础数据类型有哪些"><a href="#109-JS-中基础数据类型有哪些" class="headerlink" title="109.JS 中基础数据类型有哪些"></a>109.JS 中基础数据类型有哪些</h2><h2 id="110-如何创建一个数组大小为-100，每个值都为-0-的数组"><a href="#110-如何创建一个数组大小为-100，每个值都为-0-的数组" class="headerlink" title="110.如何创建一个数组大小为 100，每个值都为 0 的数组"></a>110.如何创建一个数组大小为 100，每个值都为 0 的数组</h2><h2 id="111-有没有使用过-async-await，他们的原理是什么"><a href="#111-有没有使用过-async-await，他们的原理是什么" class="headerlink" title="111.有没有使用过 async/await，他们的原理是什么"></a>111.有没有使用过 async/await，他们的原理是什么</h2><h2 id="112-什么是闭包，闭包的应用有哪些地方"><a href="#112-什么是闭包，闭包的应用有哪些地方" class="headerlink" title="112.什么是闭包，闭包的应用有哪些地方"></a>112.什么是闭包，闭包的应用有哪些地方</h2><h2 id="113-关于事件循环，一道异步代码执行输出顺序问题"><a href="#113-关于事件循环，一道异步代码执行输出顺序问题" class="headerlink" title="113.关于事件循环，一道异步代码执行输出顺序问题"></a>113.关于事件循环，一道异步代码执行输出顺序问题</h2><h2 id="114-解构赋值一个数组，a-取第一项默认值为-3，c-取剩下的值组成数组"><a href="#114-解构赋值一个数组，a-取第一项默认值为-3，c-取剩下的值组成数组" class="headerlink" title="114.解构赋值一个数组，a 取第一项默认值为 3，c 取剩下的值组成数组"></a>114.解构赋值一个数组，a 取第一项默认值为 3，c 取剩下的值组成数组</h2><h2 id="115-解构赋值以下对象，他们的值是多少"><a href="#115-解构赋值以下对象，他们的值是多少" class="headerlink" title="115.解构赋值以下对象，他们的值是多少"></a>115.解构赋值以下对象，他们的值是多少</h2><h2 id="116-Map-与-WeakMap-有何区别"><a href="#116-Map-与-WeakMap-有何区别" class="headerlink" title="116.Map 与 WeakMap 有何区别"></a>116.Map 与 WeakMap 有何区别</h2><h2 id="117-Javascript-数组中有那些方法可以改变自身，那些不可以"><a href="#117-Javascript-数组中有那些方法可以改变自身，那些不可以" class="headerlink" title="117.Javascript 数组中有那些方法可以改变自身，那些不可以"></a>117.Javascript 数组中有那些方法可以改变自身，那些不可以</h2><h2 id="118-如何判断一个数组是否包含某个值"><a href="#118-如何判断一个数组是否包含某个值" class="headerlink" title="118.如何判断一个数组是否包含某个值"></a>118.如何判断一个数组是否包含某个值</h2><h2 id="119-如何判断字符串包含某个子串"><a href="#119-如何判断字符串包含某个子串" class="headerlink" title="119.如何判断字符串包含某个子串"></a>119.如何判断字符串包含某个子串</h2><h2 id="120-如何判断某一个值是数组"><a href="#120-如何判断某一个值是数组" class="headerlink" title="120.如何判断某一个值是数组"></a>120.如何判断某一个值是数组</h2><h2 id="121-简述-Object-defineProperty"><a href="#121-简述-Object-defineProperty" class="headerlink" title="121.简述 Object.defineProperty"></a>121.简述 Object.defineProperty</h2><h3 id="1-数据描述符-data-descriptor"><a href="#1-数据描述符-data-descriptor" class="headerlink" title="1.数据描述符 (data descriptor)"></a>1.数据描述符 (data descriptor)</h3><h3 id="2-存取描述符-accessor-descriptor"><a href="#2-存取描述符-accessor-descriptor" class="headerlink" title="2.存取描述符 (accessor descriptor)"></a>2.存取描述符 (accessor descriptor)</h3><h2 id="122-Object-keys-与-Object-getOwnPropertyNames-有何区别"><a href="#122-Object-keys-与-Object-getOwnPropertyNames-有何区别" class="headerlink" title="122.Object.keys 与 Object.getOwnPropertyNames() 有何区别"></a>122.Object.keys 与 Object.getOwnPropertyNames() 有何区别</h2><h2 id="123-如何统计当前页面出现的所有标签"><a href="#123-如何统计当前页面出现的所有标签" class="headerlink" title="123.如何统计当前页面出现的所有标签"></a>123.如何统计当前页面出现的所有标签</h2><h2 id="124-实现一个-inherits-函数进行继承"><a href="#124-实现一个-inherits-函数进行继承" class="headerlink" title="124.实现一个 inherits 函数进行继承"></a>124.实现一个 inherits 函数进行继承</h2><h2 id="125-WeakMap-与垃圾回收有何关系"><a href="#125-WeakMap-与垃圾回收有何关系" class="headerlink" title="125.WeakMap 与垃圾回收有何关系"></a>125.WeakMap 与垃圾回收有何关系</h2><h2 id="126-什么是媒体查询，JS-可以监听媒体查询吗"><a href="#126-什么是媒体查询，JS-可以监听媒体查询吗" class="headerlink" title="126.什么是媒体查询，JS 可以监听媒体查询吗"></a>126.什么是媒体查询，JS 可以监听媒体查询吗</h2><h2 id="127-关于块级作用域，以下代码输出多少，在何时间输出"><a href="#127-关于块级作用域，以下代码输出多少，在何时间输出" class="headerlink" title="127.关于块级作用域，以下代码输出多少，在何时间输出"></a>127.关于块级作用域，以下代码输出多少，在何时间输出</h2><h2 id="128-如何逆序一个字符串"><a href="#128-如何逆序一个字符串" class="headerlink" title="128.如何逆序一个字符串"></a>128.如何逆序一个字符串</h2><h2 id="129-为何-0-1-0-2-不等于-0-3，应如何做相等比较"><a href="#129-为何-0-1-0-2-不等于-0-3，应如何做相等比较" class="headerlink" title="129.为何 0.1+0.2 不等于 0.3，应如何做相等比较"></a>129.为何 0.1+0.2 不等于 0.3，应如何做相等比较</h2><h2 id="130-关于-this-与包装对象，以下输出多少"><a href="#130-关于-this-与包装对象，以下输出多少" class="headerlink" title="130.关于 this 与包装对象，以下输出多少"></a>130.关于 this 与包装对象，以下输出多少</h2><h2 id="131-关于类型转化，判断以下代码输出"><a href="#131-关于类型转化，判断以下代码输出" class="headerlink" title="131.关于类型转化，判断以下代码输出"></a>131.关于类型转化，判断以下代码输出</h2><h2 id="132-关于暂时性死域，判断以下代码输出"><a href="#132-关于暂时性死域，判断以下代码输出" class="headerlink" title="132.关于暂时性死域，判断以下代码输出"></a>132.关于暂时性死域，判断以下代码输出</h2><h2 id="133-关于词法作用域，判断以下代码输出"><a href="#133-关于词法作用域，判断以下代码输出" class="headerlink" title="133.关于词法作用域，判断以下代码输出"></a>133.关于词法作用域，判断以下代码输出</h2><h2 id="134-关于-this，判断以下代码输出"><a href="#134-关于-this，判断以下代码输出" class="headerlink" title="134.关于 this，判断以下代码输出"></a>134.关于 this，判断以下代码输出</h2><h2 id="135-关于-new，判断以下代码输出"><a href="#135-关于-new，判断以下代码输出" class="headerlink" title="135.关于 new，判断以下代码输出"></a>135.关于 new，判断以下代码输出</h2><h2 id="136-关于简单的事件循环，判断以下代码输出"><a href="#136-关于简单的事件循环，判断以下代码输出" class="headerlink" title="136.关于简单的事件循环，判断以下代码输出"></a>136.关于简单的事件循环，判断以下代码输出</h2><h2 id="137-箭头函数和普通函数的区别"><a href="#137-箭头函数和普通函数的区别" class="headerlink" title="137.箭头函数和普通函数的区别"></a>137.箭头函数和普通函数的区别</h2><h2 id="138-什么是纯函数"><a href="#138-什么是纯函数" class="headerlink" title="138.什么是纯函数"></a>138.什么是纯函数</h2><h2 id="139-给数字添加千位符"><a href="#139-给数字添加千位符" class="headerlink" title="139.给数字添加千位符"></a>139.给数字添加千位符</h2><h2 id="140-如何实现一个深比较的函数-deepEqual"><a href="#140-如何实现一个深比较的函数-deepEqual" class="headerlink" title="140.如何实现一个深比较的函数 deepEqual"></a>140.如何实现一个深比较的函数 deepEqual</h2><h2 id="141-Object-is-与全等运算符-有何区别"><a href="#141-Object-is-与全等运算符-有何区别" class="headerlink" title="141.Object.is 与全等运算符(===)有何区别"></a>141.Object.is 与全等运算符(===)有何区别</h2><h2 id="142-如何把对象转化为-key-value-的二维数组"><a href="#142-如何把对象转化为-key-value-的二维数组" class="headerlink" title="142.如何把对象转化为 key/value 的二维数组"></a>142.如何把对象转化为 key/value 的二维数组</h2><h2 id="143-在-JS-中如何监听-Object-某个属性值的变化"><a href="#143-在-JS-中如何监听-Object-某个属性值的变化" class="headerlink" title="143.在 JS 中如何监听 Object 某个属性值的变化"></a>143.在 JS 中如何监听 Object 某个属性值的变化</h2><h2 id="144-js-中什么是-AsyncIterable"><a href="#144-js-中什么是-AsyncIterable" class="headerlink" title="144.js 中什么是 AsyncIterable"></a>144.js 中什么是 AsyncIterable</h2><h2 id="145-关于事件循环，仅有-Promise，判断以下代码输出"><a href="#145-关于事件循环，仅有-Promise，判断以下代码输出" class="headerlink" title="145.关于事件循环，仅有 Promise，判断以下代码输出"></a>145.关于事件循环，仅有 Promise，判断以下代码输出</h2><h2 id="146-了解什么是-JSBridge-吗"><a href="#146-了解什么是-JSBridge-吗" class="headerlink" title="146.了解什么是 JSBridge 吗"></a>146.了解什么是 JSBridge 吗</h2><h2 id="147-列举-Number、String、Array、Object、Promise-有哪些-API"><a href="#147-列举-Number、String、Array、Object、Promise-有哪些-API" class="headerlink" title="147.列举 Number、String、Array、Object、Promise 有哪些 API"></a>147.列举 Number、String、Array、Object、Promise 有哪些 API</h2><h3 id="1-Number"><a href="#1-Number" class="headerlink" title="1.Number"></a>1.Number</h3><h3 id="2-String"><a href="#2-String" class="headerlink" title="2.String"></a>2.String</h3><h3 id="3-Array"><a href="#3-Array" class="headerlink" title="3.Array"></a>3.Array</h3><h3 id="4-Object"><a href="#4-Object" class="headerlink" title="4.Object"></a>4.Object</h3><h2 id="148-使用-JS-如何生成一个随机字符串"><a href="#148-使用-JS-如何生成一个随机字符串" class="headerlink" title="148.使用 JS 如何生成一个随机字符串"></a>148.使用 JS 如何生成一个随机字符串</h2><h2 id="149-Number-isNaN-与-globalThis-isNaN-有何区别"><a href="#149-Number-isNaN-与-globalThis-isNaN-有何区别" class="headerlink" title="149.Number.isNaN 与 globalThis.isNaN 有何区别"></a>149.Number.isNaN 与 globalThis.isNaN 有何区别</h2><h2 id="150-如何判断一个数值为整数"><a href="#150-如何判断一个数值为整数" class="headerlink" title="150.如何判断一个数值为整数"></a>150.如何判断一个数值为整数</h2><h2 id="151-什么是安全整数，如何判断一个整数是安全整数"><a href="#151-什么是安全整数，如何判断一个整数是安全整数" class="headerlink" title="151.什么是安全整数，如何判断一个整数是安全整数"></a>151.什么是安全整数，如何判断一个整数是安全整数</h2><h2 id="152-如何把字符串全部转化为小写格式"><a href="#152-如何把字符串全部转化为小写格式" class="headerlink" title="152.如何把字符串全部转化为小写格式"></a>152.如何把字符串全部转化为小写格式</h2><h2 id="153-Array-中那些-API-可改变自身"><a href="#153-Array-中那些-API-可改变自身" class="headerlink" title="153.Array 中那些 API 可改变自身"></a>153.Array 中那些 API 可改变自身</h2><h2 id="154-如何把一个数组-Array-转化为迭代器-Iterable"><a href="#154-如何把一个数组-Array-转化为迭代器-Iterable" class="headerlink" title="154.如何把一个数组 Array 转化为迭代器 Iterable"></a>154.如何把一个数组 Array 转化为迭代器 Iterable</h2><h2 id="155-JS-中如何实现-call-apply"><a href="#155-JS-中如何实现-call-apply" class="headerlink" title="155.JS 中如何实现 call/apply"></a>155.JS 中如何实现 call/apply</h2><h2 id="156-Number-中最大数、最大安全整数、EPSILON-都是多少，原理是什么"><a href="#156-Number-中最大数、最大安全整数、EPSILON-都是多少，原理是什么" class="headerlink" title="156.Number 中最大数、最大安全整数、EPSILON 都是多少，原理是什么"></a>156.Number 中最大数、最大安全整数、EPSILON 都是多少，原理是什么</h2><h2 id="157-JS-如何检测到对象中有循环引用"><a href="#157-JS-如何检测到对象中有循环引用" class="headerlink" title="157.JS 如何检测到对象中有循环引用"></a>157.JS 如何检测到对象中有循环引用</h2><h2 id="158-实现二进制与十进制的互相转化的两个函数"><a href="#158-实现二进制与十进制的互相转化的两个函数" class="headerlink" title="158.实现二进制与十进制的互相转化的两个函数"></a>158.实现二进制与十进制的互相转化的两个函数</h2><h2 id="159-JS-中异步任务为何分为微任务与宏任务"><a href="#159-JS-中异步任务为何分为微任务与宏任务" class="headerlink" title="159.JS 中异步任务为何分为微任务与宏任务"></a>159.JS 中异步任务为何分为微任务与宏任务</h2><h2 id="160-什么是原码、补码与反码"><a href="#160-什么是原码、补码与反码" class="headerlink" title="160.什么是原码、补码与反码"></a>160.什么是原码、补码与反码</h2><h3 id="补码"><a href="#补码" class="headerlink" title="补码"></a>补码</h3><h2 id="161-如何遍历一个对象"><a href="#161-如何遍历一个对象" class="headerlink" title="161.如何遍历一个对象"></a>161.如何遍历一个对象</h2><h2 id="162-setTimeout-为什么最小只能设置-4ms，如何实现一个-0ms-的-setTimeout"><a href="#162-setTimeout-为什么最小只能设置-4ms，如何实现一个-0ms-的-setTimeout" class="headerlink" title="162.setTimeout 为什么最小只能设置 4ms，如何实现一个 0ms 的 setTimeout?"></a>162.setTimeout 为什么最小只能设置 4ms，如何实现一个 0ms 的 setTimeout?</h2><h2 id="163-JS-中如何原生实现-instanceOf"><a href="#163-JS-中如何原生实现-instanceOf" class="headerlink" title="163.JS 中如何原生实现 instanceOf"></a>163.JS 中如何原生实现 instanceOf</h2><h2 id="164-return-promise-与-return-await-promise-有何区别"><a href="#164-return-promise-与-return-await-promise-有何区别" class="headerlink" title="164.return promise 与 return await promise 有何区别"></a>164.return promise 与 return await promise 有何区别</h2><h2 id="165-在-ES6-Class-中，super-的过程中做了什么"><a href="#165-在-ES6-Class-中，super-的过程中做了什么" class="headerlink" title="165.在 ES6 Class 中，super 的过程中做了什么"></a>165.在 ES6 Class 中，super 的过程中做了什么</h2><h2 id="166-关于-Promise，判断以下代码的输出"><a href="#166-关于-Promise，判断以下代码的输出" class="headerlink" title="166.关于 Promise，判断以下代码的输出"></a>166.关于 Promise，判断以下代码的输出</h2><h2 id="167-如何取得一个数字的小数部分与整数部分"><a href="#167-如何取得一个数字的小数部分与整数部分" class="headerlink" title="167.如何取得一个数字的小数部分与整数部分"></a>167.如何取得一个数字的小数部分与整数部分</h2><h1 id="vue系列-共49题"><a href="#vue系列-共49题" class="headerlink" title="vue系列 共49题"></a>vue系列 共49题</h1><h2 id="1-面试官：说说你对vue的理解？"><a href="#1-面试官：说说你对vue的理解？" class="headerlink" title="1.面试官：说说你对vue的理解？"></a>1.面试官：说说你对vue的理解？</h2><h2 id="2-面试官：说说你对双向绑定的理解"><a href="#2-面试官：说说你对双向绑定的理解" class="headerlink" title="2.面试官：说说你对双向绑定的理解?"></a>2.面试官：说说你对双向绑定的理解?</h2><h2 id="3-面试官：说说你对-SPA-单页应用-的理解"><a href="#3-面试官：说说你对-SPA-单页应用-的理解" class="headerlink" title="3.面试官：说说你对 SPA(单页应用)的理解?"></a>3.面试官：说说你对 SPA(单页应用)的理解?</h2><h2 id="4-面试官：Vue中的v-show和v-if怎么理解"><a href="#4-面试官：Vue中的v-show和v-if怎么理解" class="headerlink" title="4.面试官：Vue中的v-show和v-if怎么理解?"></a>4.面试官：Vue中的v-show和v-if怎么理解?</h2><h2 id="5-面试官：Vue实例挂载的过程中发生了什么？"><a href="#5-面试官：Vue实例挂载的过程中发生了什么？" class="headerlink" title="5.面试官：Vue实例挂载的过程中发生了什么？"></a>5.面试官：Vue实例挂载的过程中发生了什么？</h2><h2 id="6-面试官：说说你对Vue生命周期的理解"><a href="#6-面试官：说说你对Vue生命周期的理解" class="headerlink" title="6.面试官：说说你对Vue生命周期的理解?"></a>6.面试官：说说你对Vue生命周期的理解?</h2><h2 id="7-面试官：为什么Vue中的v-fi合格v-for不建议一起用"><a href="#7-面试官：为什么Vue中的v-fi合格v-for不建议一起用" class="headerlink" title="7.面试官：为什么Vue中的v-fi合格v-for不建议一起用?"></a>7.面试官：为什么Vue中的v-fi合格v-for不建议一起用?</h2><h2 id="8-面试官：SPA-单页应用-首屏加载速度慢怎么解决"><a href="#8-面试官：SPA-单页应用-首屏加载速度慢怎么解决" class="headerlink" title="8.面试官：SPA(单页应用)首屏加载速度慢怎么解决?"></a>8.面试官：SPA(单页应用)首屏加载速度慢怎么解决?</h2><h2 id="9-面试官：为什么data属性是一个函数而不是一个对象？"><a href="#9-面试官：为什么data属性是一个函数而不是一个对象？" class="headerlink" title="9.面试官：为什么data属性是一个函数而不是一个对象？"></a>9.面试官：为什么data属性是一个函数而不是一个对象？</h2><h2 id="10-面试官：Vue中给对象添加新属性界面不刷新"><a href="#10-面试官：Vue中给对象添加新属性界面不刷新" class="headerlink" title="10.面试官：Vue中给对象添加新属性界面不刷新?"></a>10.面试官：Vue中给对象添加新属性界面不刷新?</h2><h2 id="11-面试官：Vue中组件和插件有什么区别"><a href="#11-面试官：Vue中组件和插件有什么区别" class="headerlink" title="11.面试官：Vue中组件和插件有什么区别"></a>11.面试官：Vue中组件和插件有什么区别</h2><h2 id="12-面试官：Vue组件间通信方式都有哪些"><a href="#12-面试官：Vue组件间通信方式都有哪些" class="headerlink" title="12.面试官：Vue组件间通信方式都有哪些?"></a>12.面试官：Vue组件间通信方式都有哪些?</h2><h2 id="13-面试官：说说你对nexttick的理解"><a href="#13-面试官：说说你对nexttick的理解" class="headerlink" title="13.面试官：说说你对nexttick的理解?"></a>13.面试官：说说你对nexttick的理解?</h2><h2 id="14-面试官：说说你对vue的mixin的理解，有什么应用场景？"><a href="#14-面试官：说说你对vue的mixin的理解，有什么应用场景？" class="headerlink" title="14.面试官：说说你对vue的mixin的理解，有什么应用场景？"></a>14.面试官：说说你对vue的mixin的理解，有什么应用场景？</h2><h2 id="15-面试官：说说你对slot的理解？slot使用场景有哪些？"><a href="#15-面试官：说说你对slot的理解？slot使用场景有哪些？" class="headerlink" title="15.面试官：说说你对slot的理解？slot使用场景有哪些？"></a>15.面试官：说说你对slot的理解？slot使用场景有哪些？</h2><h2 id="16-面试官：Vue-observable你有了解过吗？说说看"><a href="#16-面试官：Vue-observable你有了解过吗？说说看" class="headerlink" title="16.面试官：Vue.observable你有了解过吗？说说看"></a>16.面试官：Vue.observable你有了解过吗？说说看</h2><h2 id="17-面试官：你知道vue中key的原理吗？说说你对它的理解？"><a href="#17-面试官：你知道vue中key的原理吗？说说你对它的理解？" class="headerlink" title="17.面试官：你知道vue中key的原理吗？说说你对它的理解？"></a>17.面试官：你知道vue中key的原理吗？说说你对它的理解？</h2><h2 id="18-面试官：怎么缓存当前的组件？缓存后怎么更新？说说你对keep-alive的理解是什么？"><a href="#18-面试官：怎么缓存当前的组件？缓存后怎么更新？说说你对keep-alive的理解是什么？" class="headerlink" title="18.面试官：怎么缓存当前的组件？缓存后怎么更新？说说你对keep-alive的理解是什么？"></a>18.面试官：怎么缓存当前的组件？缓存后怎么更新？说说你对keep-alive的理解是什么？</h2><h2 id="19-面试官：Vue常用的修饰符有哪些？有什么应用场景？"><a href="#19-面试官：Vue常用的修饰符有哪些？有什么应用场景？" class="headerlink" title="19.面试官：Vue常用的修饰符有哪些？有什么应用场景？"></a>19.面试官：Vue常用的修饰符有哪些？有什么应用场景？</h2><h2 id="20-面试官：你有写过自定义指令吗？自定义指令的应用场景有哪些？"><a href="#20-面试官：你有写过自定义指令吗？自定义指令的应用场景有哪些？" class="headerlink" title="20.面试官：你有写过自定义指令吗？自定义指令的应用场景有哪些？"></a>20.面试官：你有写过自定义指令吗？自定义指令的应用场景有哪些？</h2><h2 id="21-面试官：Vue中的过滤器了解吗？过滤器的应用场景有哪些？"><a href="#21-面试官：Vue中的过滤器了解吗？过滤器的应用场景有哪些？" class="headerlink" title="21.面试官：Vue中的过滤器了解吗？过滤器的应用场景有哪些？"></a>21.面试官：Vue中的过滤器了解吗？过滤器的应用场景有哪些？</h2><h2 id="22-面试官：什么是虚拟DOM？如何实现一个虚拟DOM？说说你的思路"><a href="#22-面试官：什么是虚拟DOM？如何实现一个虚拟DOM？说说你的思路" class="headerlink" title="22.面试官：什么是虚拟DOM？如何实现一个虚拟DOM？说说你的思路"></a>22.面试官：什么是虚拟DOM？如何实现一个虚拟DOM？说说你的思路</h2><h2 id="23-面试官：了解过vue中的diff算法吗？说说看"><a href="#23-面试官：了解过vue中的diff算法吗？说说看" class="headerlink" title="23.面试官：了解过vue中的diff算法吗？说说看"></a>23.面试官：了解过vue中的diff算法吗？说说看</h2><h2 id="24-面试官：Vue项目中有封装过axios吗？怎么封装的？"><a href="#24-面试官：Vue项目中有封装过axios吗？怎么封装的？" class="headerlink" title="24.面试官：Vue项目中有封装过axios吗？怎么封装的？"></a>24.面试官：Vue项目中有封装过axios吗？怎么封装的？</h2><h2 id="25-面试官：你了解Axios的原理吗？有看过它的源码吗？"><a href="#25-面试官：你了解Axios的原理吗？有看过它的源码吗？" class="headerlink" title="25.面试官：你了解Axios的原理吗？有看过它的源码吗？"></a>25.面试官：你了解Axios的原理吗？有看过它的源码吗？</h2><h2 id="26-面试官：SSR解决了什么问题？有做过SSR吗？你是怎么做的？"><a href="#26-面试官：SSR解决了什么问题？有做过SSR吗？你是怎么做的？" class="headerlink" title="26.面试官：SSR解决了什么问题？有做过SSR吗？你是怎么做的？"></a>26.面试官：SSR解决了什么问题？有做过SSR吗？你是怎么做的？</h2><h2 id="27-面试官：说下你的Vue项目的目录结构，如果是大型项目你该怎么划分结构和划分组件呢？"><a href="#27-面试官：说下你的Vue项目的目录结构，如果是大型项目你该怎么划分结构和划分组件呢？" class="headerlink" title="27.面试官：说下你的Vue项目的目录结构，如果是大型项目你该怎么划分结构和划分组件呢？"></a>27.面试官：说下你的Vue项目的目录结构，如果是大型项目你该怎么划分结构和划分组件呢？</h2><h2 id="28-面试官：Vue要做权限管理该怎么做？控制到按钮级别的权限怎么做？"><a href="#28-面试官：Vue要做权限管理该怎么做？控制到按钮级别的权限怎么做？" class="headerlink" title="28.面试官：Vue要做权限管理该怎么做？控制到按钮级别的权限怎么做？"></a>28.面试官：Vue要做权限管理该怎么做？控制到按钮级别的权限怎么做？</h2><h2 id="29-面试官：跨域是什么？Vue项目中你是如何解决跨域的呢？"><a href="#29-面试官：跨域是什么？Vue项目中你是如何解决跨域的呢？" class="headerlink" title="29.面试官：跨域是什么？Vue项目中你是如何解决跨域的呢？"></a>29.面试官：跨域是什么？Vue项目中你是如何解决跨域的呢？</h2><h2 id="30-面试官：Vue项目如何部署？有遇到布署服务器后刷新404问题吗？"><a href="#30-面试官：Vue项目如何部署？有遇到布署服务器后刷新404问题吗？" class="headerlink" title="30.面试官：Vue项目如何部署？有遇到布署服务器后刷新404问题吗？"></a>30.面试官：Vue项目如何部署？有遇到布署服务器后刷新404问题吗？</h2><h2 id="31-面试官：你是怎么处理vue项目中的错误的？"><a href="#31-面试官：你是怎么处理vue项目中的错误的？" class="headerlink" title="31.面试官：你是怎么处理vue项目中的错误的？"></a>31.面试官：你是怎么处理vue项目中的错误的？</h2><h2 id="32-面试官：Vue3有了解过吗？能说说跟Vue2的区别吗？"><a href="#32-面试官：Vue3有了解过吗？能说说跟Vue2的区别吗？" class="headerlink" title="32.面试官：Vue3有了解过吗？能说说跟Vue2的区别吗？"></a>32.面试官：Vue3有了解过吗？能说说跟Vue2的区别吗？</h2><h2 id="33-面试官：-当新入职一家公司时，如何快速搭建开发环境并让应用跑起来"><a href="#33-面试官：-当新入职一家公司时，如何快速搭建开发环境并让应用跑起来" class="headerlink" title="33.面试官： 当新入职一家公司时，如何快速搭建开发环境并让应用跑起来"></a>33.面试官： 当新入职一家公司时，如何快速搭建开发环境并让应用跑起来</h2><h2 id="34-npm-run-dev-与-npm-start-的区别"><a href="#34-npm-run-dev-与-npm-start-的区别" class="headerlink" title="34.npm run dev 与 npm start 的区别"></a>34.npm run dev 与 npm start 的区别</h2><h2 id="35-react-与-vue-数组中-key-的作用是什么"><a href="#35-react-与-vue-数组中-key-的作用是什么" class="headerlink" title="35.react 与 vue 数组中 key 的作用是什么"></a>35.react 与 vue 数组中 key 的作用是什么</h2><h2 id="36-vue-中-v-if-和-v-show-的区别是什么"><a href="#36-vue-中-v-if-和-v-show-的区别是什么" class="headerlink" title="36.vue 中 v-if 和 v-show 的区别是什么"></a>36.vue 中 v-if 和 v-show 的区别是什么</h2><h2 id="37-vue-中-computed-的原理是什么"><a href="#37-vue-中-computed-的原理是什么" class="headerlink" title="37.vue 中 computed 的原理是什么"></a>37.vue 中 computed 的原理是什么</h2><h2 id="38-vue-loader-的实现原理是什么"><a href="#38-vue-loader-的实现原理是什么" class="headerlink" title="38.vue-loader 的实现原理是什么"></a>38.vue-loader 的实现原理是什么</h2><h2 id="39-如何使用-react-vue-实现一个-message-API"><a href="#39-如何使用-react-vue-实现一个-message-API" class="headerlink" title="39.如何使用 react/vue 实现一个 message API"></a>39.如何使用 react/vue 实现一个 message API</h2><h2 id="40-如果使用-SSR，可以在-created-componentWillMount-中访问-localStorage-吗"><a href="#40-如果使用-SSR，可以在-created-componentWillMount-中访问-localStorage-吗" class="headerlink" title="40.如果使用 SSR，可以在 created/componentWillMount 中访问 localStorage 吗"></a>40.如果使用 SSR，可以在 created/componentWillMount 中访问 localStorage 吗</h2><h2 id="41-在-react-vue-中数组是否可以以在数组中的次序为-key"><a href="#41-在-react-vue-中数组是否可以以在数组中的次序为-key" class="headerlink" title="41.在 react/vue 中数组是否可以以在数组中的次序为 key"></a>41.在 react/vue 中数组是否可以以在数组中的次序为 key</h2><h2 id="42-如何设计一个-UI-组件库"><a href="#42-如何设计一个-UI-组件库" class="headerlink" title="42.如何设计一个 UI 组件库"></a>42.如何设计一个 UI 组件库</h2><h2 id="43-Vue-中-nextTick-的实现原理是什么"><a href="#43-Vue-中-nextTick-的实现原理是什么" class="headerlink" title="43.Vue 中 nextTick 的实现原理是什么"></a>43.Vue 中 nextTick 的实现原理是什么</h2><h2 id="44-现代框架如-React、Vue-相比原生开发有什么优势"><a href="#44-现代框架如-React、Vue-相比原生开发有什么优势" class="headerlink" title="44.现代框架如 React、Vue 相比原生开发有什么优势"></a>44.现代框架如 React、Vue 相比原生开发有什么优势</h2><h2 id="45-React-Vue-中的-router-实现原理如何"><a href="#45-React-Vue-中的-router-实现原理如何" class="headerlink" title="45.React/Vue 中的 router 实现原理如何"></a>45.React/Vue 中的 router 实现原理如何</h2><h3 id="45-1-history-API"><a href="#45-1-history-API" class="headerlink" title="45.1 history API"></a>45.1 history API</h3><h3 id="45-2-hash"><a href="#45-2-hash" class="headerlink" title="45.2 hash"></a>45.2 hash</h3><h2 id="46-前端项目中有哪些副作用"><a href="#46-前端项目中有哪些副作用" class="headerlink" title="46.前端项目中有哪些副作用"></a>46.前端项目中有哪些副作用</h2><h2 id="47-React-Vue-中受控组件与不受控组件的区别"><a href="#47-React-Vue-中受控组件与不受控组件的区别" class="headerlink" title="47.React/Vue 中受控组件与不受控组件的区别"></a>47.React/Vue 中受控组件与不受控组件的区别</h2><h2 id="48-React-Vue-中兄弟组件如何进行通信"><a href="#48-React-Vue-中兄弟组件如何进行通信" class="headerlink" title="48.React/Vue 中兄弟组件如何进行通信"></a>48.React/Vue 中兄弟组件如何进行通信</h2><h2 id="49-在虚拟-DOM-中进行-diff-算法时，介绍当根据-key-对数组进行重用时的算法"><a href="#49-在虚拟-DOM-中进行-diff-算法时，介绍当根据-key-对数组进行重用时的算法" class="headerlink" title="49.在虚拟 DOM 中进行 diff 算法时，介绍当根据 key 对数组进行重用时的算法"></a>49.在虚拟 DOM 中进行 diff 算法时，介绍当根据 key 对数组进行重用时的算法</h2><h1 id="Vue3系列-共8题"><a href="#Vue3系列-共8题" class="headerlink" title="Vue3系列 共8题"></a>Vue3系列 共8题</h1><h2 id="1-面试官：Vue3-0的设计目标是什么？做了哪些优化"><a href="#1-面试官：Vue3-0的设计目标是什么？做了哪些优化" class="headerlink" title="1.面试官：Vue3.0的设计目标是什么？做了哪些优化?"></a>1.面试官：Vue3.0的设计目标是什么？做了哪些优化?</h2><h2 id="2-面试官：Vue3-0-性能提升主要是通过哪几方面体现的？"><a href="#2-面试官：Vue3-0-性能提升主要是通过哪几方面体现的？" class="headerlink" title="2.面试官：Vue3.0 性能提升主要是通过哪几方面体现的？"></a>2.面试官：Vue3.0 性能提升主要是通过哪几方面体现的？</h2><h2 id="3-面试官：Vue3-0里为什么要用-Proxy-API-替代-defineProperty-API-？"><a href="#3-面试官：Vue3-0里为什么要用-Proxy-API-替代-defineProperty-API-？" class="headerlink" title="3.面试官：Vue3.0里为什么要用 Proxy API 替代 defineProperty API ？"></a>3.面试官：Vue3.0里为什么要用 Proxy API 替代 defineProperty API ？</h2><h2 id="4-面试官：Vue3-0-所采用的-Composition-Api-与-Vue2-x-使用的-Options-Api-有什么不同？"><a href="#4-面试官：Vue3-0-所采用的-Composition-Api-与-Vue2-x-使用的-Options-Api-有什么不同？" class="headerlink" title="4.面试官：Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同？"></a>4.面试官：Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同？</h2><h2 id="5-面试官：说说Vue-3-0中Treeshaking特性？举例说明一下？"><a href="#5-面试官：说说Vue-3-0中Treeshaking特性？举例说明一下？" class="headerlink" title="5.面试官：说说Vue 3.0中Treeshaking特性？举例说明一下？"></a>5.面试官：说说Vue 3.0中Treeshaking特性？举例说明一下？</h2><h2 id="6-面试官：用Vue3-0-写过组件吗？如果想实现一个-Modal你会怎么设计？"><a href="#6-面试官：用Vue3-0-写过组件吗？如果想实现一个-Modal你会怎么设计？" class="headerlink" title="6.面试官：用Vue3.0 写过组件吗？如果想实现一个 Modal你会怎么设计？"></a>6.面试官：用Vue3.0 写过组件吗？如果想实现一个 Modal你会怎么设计？</h2><h2 id="7-vue3-0-中为什么要使用-Proxy，它相比以前的实现方式有什么改进"><a href="#7-vue3-0-中为什么要使用-Proxy，它相比以前的实现方式有什么改进" class="headerlink" title="7.vue3.0 中为什么要使用 Proxy，它相比以前的实现方式有什么改进"></a>7.vue3.0 中为什么要使用 Proxy，它相比以前的实现方式有什么改进</h2><h2 id="8-vue3-中，如何监听数组的变化"><a href="#8-vue3-中，如何监听数组的变化" class="headerlink" title="8.vue3 中，如何监听数组的变化"></a>8.vue3 中，如何监听数组的变化</h2><h1 id="ES6系列-共10题"><a href="#ES6系列-共10题" class="headerlink" title="ES6系列 共10题"></a>ES6系列 共10题</h1><h2 id="1-面试官：说说var、let、const之间的区别"><a href="#1-面试官：说说var、let、const之间的区别" class="headerlink" title="1.面试官：说说var、let、const之间的区别"></a>1.面试官：说说var、let、const之间的区别</h2><h2 id="2-面试官：ES6中数组新增了哪些扩展"><a href="#2-面试官：ES6中数组新增了哪些扩展" class="headerlink" title="2.面试官：ES6中数组新增了哪些扩展?"></a>2.面试官：ES6中数组新增了哪些扩展?</h2><h2 id="3-面试官：ES6中对象新增了哪些扩展"><a href="#3-面试官：ES6中对象新增了哪些扩展" class="headerlink" title="3.面试官：ES6中对象新增了哪些扩展?"></a>3.面试官：ES6中对象新增了哪些扩展?</h2><h2 id="4-面试官：ES6中函数新增了哪些扩展"><a href="#4-面试官：ES6中函数新增了哪些扩展" class="headerlink" title="4.面试官：ES6中函数新增了哪些扩展?"></a>4.面试官：ES6中函数新增了哪些扩展?</h2><h2 id="5-面试官：ES6中新增的Set、Map两种数据结构怎么理解"><a href="#5-面试官：ES6中新增的Set、Map两种数据结构怎么理解" class="headerlink" title="5.面试官：ES6中新增的Set、Map两种数据结构怎么理解?"></a>5.面试官：ES6中新增的Set、Map两种数据结构怎么理解?</h2><h2 id="6-面试官：你是怎么理解ES6中-Promise的？使用场景？"><a href="#6-面试官：你是怎么理解ES6中-Promise的？使用场景？" class="headerlink" title="6.面试官：你是怎么理解ES6中 Promise的？使用场景？"></a>6.面试官：你是怎么理解ES6中 Promise的？使用场景？</h2><h2 id="7-面试官：怎么理解ES6中-Generator的？使用场景？"><a href="#7-面试官：怎么理解ES6中-Generator的？使用场景？" class="headerlink" title="7.面试官：怎么理解ES6中 Generator的？使用场景？"></a>7.面试官：怎么理解ES6中 Generator的？使用场景？</h2><h2 id="8-面试官：你是怎么理解ES6中Proxy的？使用场景"><a href="#8-面试官：你是怎么理解ES6中Proxy的？使用场景" class="headerlink" title="8.面试官：你是怎么理解ES6中Proxy的？使用场景?"></a>8.面试官：你是怎么理解ES6中Proxy的？使用场景?</h2><h2 id="9-面试官：你是怎么理解ES6中Module的？使用场景？"><a href="#9-面试官：你是怎么理解ES6中Module的？使用场景？" class="headerlink" title="9.面试官：你是怎么理解ES6中Module的？使用场景？"></a>9.面试官：你是怎么理解ES6中Module的？使用场景？</h2><h2 id="10-面试官：你是怎么理解ES6中-Decorator-的？使用场景？-opens-new-window"><a href="#10-面试官：你是怎么理解ES6中-Decorator-的？使用场景？-opens-new-window" class="headerlink" title="10.面试官：你是怎么理解ES6中 Decorator 的？使用场景？(opens new window)"></a>10.面试官：你是怎么理解ES6中 Decorator 的？使用场景？(opens new window)</h2><h1 id="webpack系列-共10题"><a href="#webpack系列-共10题" class="headerlink" title="webpack系列 共10题"></a>webpack系列 共10题</h1><h2 id="1-面试官：说说你对webpack的理解？解决了什么问题？-opens-new-window"><a href="#1-面试官：说说你对webpack的理解？解决了什么问题？-opens-new-window" class="headerlink" title="1.面试官：说说你对webpack的理解？解决了什么问题？(opens new window)"></a>1.面试官：说说你对webpack的理解？解决了什么问题？(opens new window)</h2><h2 id="2-面试官：说说webpack的构建流程-opens-new-window"><a href="#2-面试官：说说webpack的构建流程-opens-new-window" class="headerlink" title="2.面试官：说说webpack的构建流程?(opens new window)"></a>2.面试官：说说webpack的构建流程?(opens new window)</h2><h2 id="3-面试官：说说webpack中常见的Loader？解决了什么问题？-opens-new-window"><a href="#3-面试官：说说webpack中常见的Loader？解决了什么问题？-opens-new-window" class="headerlink" title="3.面试官：说说webpack中常见的Loader？解决了什么问题？(opens new window)"></a>3.面试官：说说webpack中常见的Loader？解决了什么问题？(opens new window)</h2><h2 id="4-面试官：说说webpack中常见的Plugin？解决了什么问题？-opens-new-window"><a href="#4-面试官：说说webpack中常见的Plugin？解决了什么问题？-opens-new-window" class="headerlink" title="4.面试官：说说webpack中常见的Plugin？解决了什么问题？(opens new window)"></a>4.面试官：说说webpack中常见的Plugin？解决了什么问题？(opens new window)</h2><h2 id="5-面试官：说说Loader和Plugin的区别？编写Loader，Plugin的思路？-opens-new-window"><a href="#5-面试官：说说Loader和Plugin的区别？编写Loader，Plugin的思路？-opens-new-window" class="headerlink" title="5.面试官：说说Loader和Plugin的区别？编写Loader，Plugin的思路？(opens new window)"></a>5.面试官：说说Loader和Plugin的区别？编写Loader，Plugin的思路？(opens new window)</h2><h2 id="6-面试官：说说webpack的热更新是如何做到的？原理是什么？-opens-new-window"><a href="#6-面试官：说说webpack的热更新是如何做到的？原理是什么？-opens-new-window" class="headerlink" title="6.面试官：说说webpack的热更新是如何做到的？原理是什么？(opens new window)"></a>6.面试官：说说webpack的热更新是如何做到的？原理是什么？(opens new window)</h2><h2 id="7-面试官：说说webpack-proxy工作原理？为什么能解决跨域-opens-new-window"><a href="#7-面试官：说说webpack-proxy工作原理？为什么能解决跨域-opens-new-window" class="headerlink" title="7.面试官：说说webpack proxy工作原理？为什么能解决跨域?(opens new window)"></a>7.面试官：说说webpack proxy工作原理？为什么能解决跨域?(opens new window)</h2><h2 id="8-面试官：说说如何借助webpack来优化前端性能？-opens-new-window"><a href="#8-面试官：说说如何借助webpack来优化前端性能？-opens-new-window" class="headerlink" title="8.面试官：说说如何借助webpack来优化前端性能？(opens new window)"></a>8.面试官：说说如何借助webpack来优化前端性能？(opens new window)</h2><h2 id="9-面试官：如何提高webpack的构建速度？-opens-new-window"><a href="#9-面试官：如何提高webpack的构建速度？-opens-new-window" class="headerlink" title="9.面试官：如何提高webpack的构建速度？(opens new window)"></a>9.面试官：如何提高webpack的构建速度？(opens new window)</h2><h2 id="10-面试官：与webpack类似的工具还有哪些？区别？-opens-new-window"><a href="#10-面试官：与webpack类似的工具还有哪些？区别？-opens-new-window" class="headerlink" title="10.面试官：与webpack类似的工具还有哪些？区别？(opens new window)"></a>10.面试官：与webpack类似的工具还有哪些？区别？(opens new window)</h2><h1 id="HTTP系列"><a href="#HTTP系列" class="headerlink" title="HTTP系列"></a>HTTP系列</h1><h2 id="1-面试官：什么是HTTP-HTTP-和-HTTPS-的区别-opens-new-window"><a href="#1-面试官：什么是HTTP-HTTP-和-HTTPS-的区别-opens-new-window" class="headerlink" title="1.面试官：什么是HTTP? HTTP 和 HTTPS 的区别?(opens new window)"></a>1.面试官：什么是HTTP? HTTP 和 HTTPS 的区别?(opens new window)</h2><h2 id="2-面试官：为什么说HTTPS比HTTP安全-HTTPS是如何保证安全的？-opens-new-window"><a href="#2-面试官：为什么说HTTPS比HTTP安全-HTTPS是如何保证安全的？-opens-new-window" class="headerlink" title="2.面试官：为什么说HTTPS比HTTP安全? HTTPS是如何保证安全的？(opens new window)"></a>2.面试官：为什么说HTTPS比HTTP安全? HTTPS是如何保证安全的？(opens new window)</h2><h2 id="3-面试官：如何理解UDP-和-TCP-区别-应用场景-opens-new-window"><a href="#3-面试官：如何理解UDP-和-TCP-区别-应用场景-opens-new-window" class="headerlink" title="3.面试官：如何理解UDP 和 TCP? 区别? 应用场景?(opens new window)"></a>3.面试官：如何理解UDP 和 TCP? 区别? 应用场景?(opens new window)</h2><h2 id="4-面试官：如何理解OSI七层模型-opens-new-window"><a href="#4-面试官：如何理解OSI七层模型-opens-new-window" class="headerlink" title="4.面试官：如何理解OSI七层模型?(opens new window)"></a>4.面试官：如何理解OSI七层模型?(opens new window)</h2><h2 id="5-面试官：如何理解TCP-IP协议-opens-new-window"><a href="#5-面试官：如何理解TCP-IP协议-opens-new-window" class="headerlink" title="5.面试官：如何理解TCP/IP协议?(opens new window)"></a>5.面试官：如何理解TCP/IP协议?(opens new window)</h2><h2 id="6-面试官：DNS协议-是什么？说说DNS-完整的查询过程-opens-new-window"><a href="#6-面试官：DNS协议-是什么？说说DNS-完整的查询过程-opens-new-window" class="headerlink" title="6.面试官：DNS协议 是什么？说说DNS 完整的查询过程?(opens new window)"></a>6.面试官：DNS协议 是什么？说说DNS 完整的查询过程?(opens new window)</h2><h2 id="7-面试官：如何理解CDN？说说实现原理？-opens-new-window"><a href="#7-面试官：如何理解CDN？说说实现原理？-opens-new-window" class="headerlink" title="7.面试官：如何理解CDN？说说实现原理？(opens new window)"></a>7.面试官：如何理解CDN？说说实现原理？(opens new window)</h2><h2 id="8-面试官：说说-HTTP1-0-1-1-2-0-的区别-opens-new-window"><a href="#8-面试官：说说-HTTP1-0-1-1-2-0-的区别-opens-new-window" class="headerlink" title="8.面试官：说说 HTTP1.0/1.1/2.0 的区别?(opens new window)"></a>8.面试官：说说 HTTP1.0/1.1/2.0 的区别?(opens new window)</h2><h2 id="9-面试官：说说HTTP-常见的状态码有哪些，适用场景？-opens-new-window"><a href="#9-面试官：说说HTTP-常见的状态码有哪些，适用场景？-opens-new-window" class="headerlink" title="9.面试官：说说HTTP 常见的状态码有哪些，适用场景？(opens new window)"></a>9.面试官：说说HTTP 常见的状态码有哪些，适用场景？(opens new window)</h2><h2 id="10-面试官：说一下-GET-和-POST-的区别？-opens-new-window"><a href="#10-面试官：说一下-GET-和-POST-的区别？-opens-new-window" class="headerlink" title="10.面试官：说一下 GET 和 POST 的区别？(opens new window)"></a>10.面试官：说一下 GET 和 POST 的区别？(opens new window)</h2><h2 id="11-面试官：说说-HTTP-常见的请求头有哪些-作用？-opens-new-window"><a href="#11-面试官：说说-HTTP-常见的请求头有哪些-作用？-opens-new-window" class="headerlink" title="11.面试官：说说 HTTP 常见的请求头有哪些? 作用？(opens new window)"></a>11.面试官：说说 HTTP 常见的请求头有哪些? 作用？(opens new window)</h2><h2 id="12-面试官：说说地址栏输入-URL-敲下回车后发生了什么？-opens-new-window"><a href="#12-面试官：说说地址栏输入-URL-敲下回车后发生了什么？-opens-new-window" class="headerlink" title="12.面试官：说说地址栏输入 URL 敲下回车后发生了什么？(opens new window)"></a>12.面试官：说说地址栏输入 URL 敲下回车后发生了什么？(opens new window)</h2><h2 id="13-面试官：说说TCP为什么需要三次握手和四次挥手？-opens-new-window"><a href="#13-面试官：说说TCP为什么需要三次握手和四次挥手？-opens-new-window" class="headerlink" title="13.面试官：说说TCP为什么需要三次握手和四次挥手？(opens new window)"></a>13.面试官：说说TCP为什么需要三次握手和四次挥手？(opens new window)</h2><h2 id="14-面试官：说说对WebSocket的理解？应用场景？-opens-new-window"><a href="#14-面试官：说说对WebSocket的理解？应用场景？-opens-new-window" class="headerlink" title="14.面试官：说说对WebSocket的理解？应用场景？(opens new window)"></a>14.面试官：说说对WebSocket的理解？应用场景？(opens new window)</h2><h1 id="NodeJS系列-共63题"><a href="#NodeJS系列-共63题" class="headerlink" title="NodeJS系列 共63题"></a>NodeJS系列 共63题</h1><h2 id="1-面试官：说说你对Node-js-的理解？优缺点？应用场景？-opens-new-window"><a href="#1-面试官：说说你对Node-js-的理解？优缺点？应用场景？-opens-new-window" class="headerlink" title="1.面试官：说说你对Node.js 的理解？优缺点？应用场景？(opens new window)"></a>1.面试官：说说你对Node.js 的理解？优缺点？应用场景？(opens new window)</h2><h2 id="2-面试官：说说-Node-js-有哪些全局对象？-opens-new-window"><a href="#2-面试官：说说-Node-js-有哪些全局对象？-opens-new-window" class="headerlink" title="2.面试官：说说 Node. js 有哪些全局对象？(opens new window)"></a>2.面试官：说说 Node. js 有哪些全局对象？(opens new window)</h2><h2 id="3-面试官：说说对-Node-中的-process-的理解？有哪些常用方法？-opens-new-window"><a href="#3-面试官：说说对-Node-中的-process-的理解？有哪些常用方法？-opens-new-window" class="headerlink" title="3.面试官：说说对 Node 中的 process 的理解？有哪些常用方法？(opens new window)"></a>3.面试官：说说对 Node 中的 process 的理解？有哪些常用方法？(opens new window)</h2><h2 id="4-面试官：说说对-Node-中的-fs模块的理解-有哪些常用方法-opens-new-window"><a href="#4-面试官：说说对-Node-中的-fs模块的理解-有哪些常用方法-opens-new-window" class="headerlink" title="4.面试官：说说对 Node 中的 fs模块的理解? 有哪些常用方法(opens new window)"></a>4.面试官：说说对 Node 中的 fs模块的理解? 有哪些常用方法(opens new window)</h2><h2 id="5-面试官：说说对-Node-中的-Buffer-的理解？应用场景？-opens-new-window"><a href="#5-面试官：说说对-Node-中的-Buffer-的理解？应用场景？-opens-new-window" class="headerlink" title="5.面试官：说说对 Node 中的 Buffer 的理解？应用场景？(opens new window)"></a>5.面试官：说说对 Node 中的 Buffer 的理解？应用场景？(opens new window)</h2><h2 id="6-面试官：说说对-Node-中的-Stream-的理解？应用场景？-opens-new-window"><a href="#6-面试官：说说对-Node-中的-Stream-的理解？应用场景？-opens-new-window" class="headerlink" title="6.面试官：说说对 Node 中的 Stream 的理解？应用场景？(opens new window)"></a>6.面试官：说说对 Node 中的 Stream 的理解？应用场景？(opens new window)</h2><h2 id="7-面试官：说说Node中的EventEmitter-如何实现一个EventEmitter-opens-new-window"><a href="#7-面试官：说说Node中的EventEmitter-如何实现一个EventEmitter-opens-new-window" class="headerlink" title="7.面试官：说说Node中的EventEmitter? 如何实现一个EventEmitter?(opens new window)"></a>7.面试官：说说Node中的EventEmitter? 如何实现一个EventEmitter?(opens new window)</h2><h2 id="8-面试官：说说对Nodejs中的事件循环机制理解-opens-new-window"><a href="#8-面试官：说说对Nodejs中的事件循环机制理解-opens-new-window" class="headerlink" title="8.面试官：说说对Nodejs中的事件循环机制理解?(opens new window)"></a>8.面试官：说说对Nodejs中的事件循环机制理解?(opens new window)</h2><h2 id="9-面试官：说说-Node-文件查找的优先级以及-Require-方法的文件查找策略-opens-new-window"><a href="#9-面试官：说说-Node-文件查找的优先级以及-Require-方法的文件查找策略-opens-new-window" class="headerlink" title="9.面试官：说说 Node 文件查找的优先级以及 Require 方法的文件查找策略?(opens new window)"></a>9.面试官：说说 Node 文件查找的优先级以及 Require 方法的文件查找策略?(opens new window)</h2><h2 id="10-面试官：说说对中间件概念的理解，如何封装-node-中间件？-opens-new-window"><a href="#10-面试官：说说对中间件概念的理解，如何封装-node-中间件？-opens-new-window" class="headerlink" title="10.面试官：说说对中间件概念的理解，如何封装 node 中间件？(opens new window)"></a>10.面试官：说说对中间件概念的理解，如何封装 node 中间件？(opens new window)</h2><h2 id="11-面试官：如何实现jwt鉴权机制？说说你的思路-opens-new-window"><a href="#11-面试官：如何实现jwt鉴权机制？说说你的思路-opens-new-window" class="headerlink" title="11.面试官：如何实现jwt鉴权机制？说说你的思路(opens new window)"></a>11.面试官：如何实现jwt鉴权机制？说说你的思路(opens new window)</h2><h2 id="12-面试官：如何实现文件上传？说说你的思路-opens-new-window"><a href="#12-面试官：如何实现文件上传？说说你的思路-opens-new-window" class="headerlink" title="12.面试官：如何实现文件上传？说说你的思路(opens new window)"></a>12.面试官：如何实现文件上传？说说你的思路(opens new window)</h2><h2 id="13-面试官：如果让你来设计一个分页功能-你会怎么设计-前后端如何交互-opens-new-window"><a href="#13-面试官：如果让你来设计一个分页功能-你会怎么设计-前后端如何交互-opens-new-window" class="headerlink" title="13.面试官：如果让你来设计一个分页功能, 你会怎么设计? 前后端如何交互?(opens new window)"></a>13.面试官：如果让你来设计一个分页功能, 你会怎么设计? 前后端如何交互?(opens new window)</h2><h2 id="14-面试官：Node性能如何进行监控以及优化？-opens-new-window"><a href="#14-面试官：Node性能如何进行监控以及优化？-opens-new-window" class="headerlink" title="14.面试官：Node性能如何进行监控以及优化？(opens new window)"></a>14.面试官：Node性能如何进行监控以及优化？(opens new window)</h2><h2 id="15-有没有读过-koa-的源码，什么是洋葱模型呢"><a href="#15-有没有读过-koa-的源码，什么是洋葱模型呢" class="headerlink" title="15.有没有读过 koa 的源码，什么是洋葱模型呢"></a>15.有没有读过 koa 的源码，什么是洋葱模型呢</h2><h2 id="16-如何监控文件的变动"><a href="#16-如何监控文件的变动" class="headerlink" title="16.如何监控文件的变动"></a>16.如何监控文件的变动</h2><h2 id="17-在-Node-应用中如何利用多核心-CPU-的优势"><a href="#17-在-Node-应用中如何利用多核心-CPU-的优势" class="headerlink" title="17.在 Node 应用中如何利用多核心 CPU 的优势"></a>17.在 Node 应用中如何利用多核心 CPU 的优势</h2><h2 id="18-Node-中-cluster-的原理是什么"><a href="#18-Node-中-cluster-的原理是什么" class="headerlink" title="18.Node 中 cluster 的原理是什么"></a>18.Node 中 cluster 的原理是什么</h2><h2 id="19-Node-中如何判断一个路径是文件还是文件夹"><a href="#19-Node-中如何判断一个路径是文件还是文件夹" class="headerlink" title="19.Node 中如何判断一个路径是文件还是文件夹"></a>19.Node 中如何判断一个路径是文件还是文件夹</h2><h2 id="20-以下代码，koa-会返回什么数据"><a href="#20-以下代码，koa-会返回什么数据" class="headerlink" title="20.以下代码，koa 会返回什么数据"></a>20.以下代码，koa 会返回什么数据</h2><h2 id="21-Node-如何进行进程间通信"><a href="#21-Node-如何进行进程间通信" class="headerlink" title="21.Node 如何进行进程间通信"></a>21.Node 如何进行进程间通信</h2><h2 id="22-有没有用过-continuous-local-storage，用在了哪里"><a href="#22-有没有用过-continuous-local-storage，用在了哪里" class="headerlink" title="22.有没有用过 continuous local storage，用在了哪里"></a>22.有没有用过 continuous local storage，用在了哪里</h2><h2 id="23-Promise-在异步资源的生命周期-async-hooks-中是如何被销毁的"><a href="#23-Promise-在异步资源的生命周期-async-hooks-中是如何被销毁的" class="headerlink" title="23.Promise 在异步资源的生命周期 (async_hooks) 中是如何被销毁的"></a>23.Promise 在异步资源的生命周期 (async_hooks) 中是如何被销毁的</h2><h2 id="24-在-node-中如何监听异步资源的生命周期"><a href="#24-在-node-中如何监听异步资源的生命周期" class="headerlink" title="24.在 node 中如何监听异步资源的生命周期"></a>24.在 node 中如何监听异步资源的生命周期</h2><h2 id="25-测试中-TDD-与-BDD-有什么区别"><a href="#25-测试中-TDD-与-BDD-有什么区别" class="headerlink" title="25.测试中 TDD 与 BDD 有什么区别"></a>25.测试中 TDD 与 BDD 有什么区别</h2><h2 id="26-node-—max-old-space-size-4096-是什么意思"><a href="#26-node-—max-old-space-size-4096-是什么意思" class="headerlink" title="26.node —max-old-space-size=4096 是什么意思"></a>26.node —max-old-space-size=4096 是什么意思</h2><h2 id="27-如何理解-Node-的异步非阻塞-IO"><a href="#27-如何理解-Node-的异步非阻塞-IO" class="headerlink" title="27.如何理解 Node 的异步非阻塞 IO"></a>27.如何理解 Node 的异步非阻塞 IO</h2><h2 id="28-当-Node-应用发生-gc-时，如何监控"><a href="#28-当-Node-应用发生-gc-时，如何监控" class="headerlink" title="28.当 Node 应用发生 gc 时，如何监控"></a>28.当 Node 应用发生 gc 时，如何监控</h2><h2 id="30-Node-应用中如何查看-gc-的日志"><a href="#30-Node-应用中如何查看-gc-的日志" class="headerlink" title="30.Node 应用中如何查看 gc 的日志"></a>30.Node 应用中如何查看 gc 的日志</h2><h2 id="31-如何获取你们-Node-项目的-cpu-profile-快照"><a href="#31-如何获取你们-Node-项目的-cpu-profile-快照" class="headerlink" title="31.如何获取你们 Node 项目的 cpu profile 快照"></a>31.如何获取你们 Node 项目的 cpu profile 快照</h2><h2 id="32-Node-中循环引用会发生什么"><a href="#32-Node-中循环引用会发生什么" class="headerlink" title="32.Node 中循环引用会发生什么"></a>32.Node 中循环引用会发生什么</h2><h2 id="33-Node-中-require-时发生了什么"><a href="#33-Node-中-require-时发生了什么" class="headerlink" title="33.Node 中 require 时发生了什么"></a>33.Node 中 require 时发生了什么</h2><h2 id="34-简述-node-v8-中的垃圾回收机制"><a href="#34-简述-node-v8-中的垃圾回收机制" class="headerlink" title="34.简述 node/v8 中的垃圾回收机制"></a>34.简述 node/v8 中的垃圾回收机制</h2><h2 id="35-node-中-exec，fork-与-spawn-有何区别"><a href="#35-node-中-exec，fork-与-spawn-有何区别" class="headerlink" title="35.node 中 exec，fork 与 spawn 有何区别"></a>35.node 中 exec，fork 与 spawn 有何区别</h2><h2 id="36-node-中-dns-resolve-及-dns-lookup-有什么区别"><a href="#36-node-中-dns-resolve-及-dns-lookup-有什么区别" class="headerlink" title="36.node 中 dns.resolve 及 dns.lookup 有什么区别"></a>36.node 中 dns.resolve 及 dns.lookup 有什么区别</h2><h2 id="37-Node-中-require-json-文件数据时，如何当文件更新时，重新-require"><a href="#37-Node-中-require-json-文件数据时，如何当文件更新时，重新-require" class="headerlink" title="37.Node 中 require json 文件数据时，如何当文件更新时，重新 require"></a>37.Node 中 require json 文件数据时，如何当文件更新时，重新 require</h2><h2 id="38-node-中如何查看函数异步调用栈"><a href="#38-node-中如何查看函数异步调用栈" class="headerlink" title="38.node 中如何查看函数异步调用栈"></a>38.node 中如何查看函数异步调用栈</h2><h2 id="39-有没有接触过-fs-extra，它是解决什么问题的"><a href="#39-有没有接触过-fs-extra，它是解决什么问题的" class="headerlink" title="39.有没有接触过 fs-extra，它是解决什么问题的"></a>39.有没有接触过 fs-extra，它是解决什么问题的</h2><h2 id="40-在-node-中如何开启-https"><a href="#40-在-node-中如何开启-https" class="headerlink" title="40.在 node 中如何开启 https"></a>40.在 node 中如何开启 https</h2><h2 id="41-node-中-module-exports-与-exports-有什么区别"><a href="#41-node-中-module-exports-与-exports-有什么区别" class="headerlink" title="41.node 中 module.exports 与 exports 有什么区别"></a>41.node 中 module.exports 与 exports 有什么区别</h2><h2 id="42-如何实现一个-timeout-的中间件"><a href="#42-如何实现一个-timeout-的中间件" class="headerlink" title="42.如何实现一个 timeout 的中间件"></a>42.如何实现一个 timeout 的中间件</h2><h2 id="43-如何得知目前-node-版本的-v8-版本号"><a href="#43-如何得知目前-node-版本的-v8-版本号" class="headerlink" title="43.如何得知目前 node 版本的 v8 版本号"></a>43.如何得知目前 node 版本的 v8 版本号</h2><h2 id="44-如何得知目前-node-版本的-v8-版本号"><a href="#44-如何得知目前-node-版本的-v8-版本号" class="headerlink" title="44.如何得知目前 node 版本的 v8 版本号"></a>44.如何得知目前 node 版本的 v8 版本号</h2><h2 id="45-在-node-中如何判断一个对象是-stream"><a href="#45-在-node-中如何判断一个对象是-stream" class="headerlink" title="45.在 node 中如何判断一个对象是 stream"></a>45.在 node 中如何判断一个对象是 stream</h2><h2 id="46-在-node-端如何向服务器上传文件"><a href="#46-在-node-端如何向服务器上传文件" class="headerlink" title="46.在 node 端如何向服务器上传文件"></a>46.在 node 端如何向服务器上传文件</h2><h2 id="47-node-中-nextTick-与-setTimeout-有什么区别"><a href="#47-node-中-nextTick-与-setTimeout-有什么区别" class="headerlink" title="47.node 中 nextTick 与 setTimeout 有什么区别"></a>47.node 中 nextTick 与 setTimeout 有什么区别</h2><h2 id="48-如何在生产环境部署一个-Node-应用"><a href="#48-如何在生产环境部署一个-Node-应用" class="headerlink" title="48.如何在生产环境部署一个 Node 应用"></a>48.如何在生产环境部署一个 Node 应用</h2><h2 id="49-express-中间件的原理是什么"><a href="#49-express-中间件的原理是什么" class="headerlink" title="49.express 中间件的原理是什么"></a>49.express 中间件的原理是什么</h2><h2 id="50-如何检测并避免循环依赖"><a href="#50-如何检测并避免循环依赖" class="headerlink" title="50.如何检测并避免循环依赖"></a>50.如何检测并避免循环依赖</h2><h2 id="51-如何发布一个全局可执行命令的-npm-package"><a href="#51-如何发布一个全局可执行命令的-npm-package" class="headerlink" title="51.如何发布一个全局可执行命令的 npm package"></a>51.如何发布一个全局可执行命令的 npm package</h2><h2 id="52-如何正确得知某张图片的-MIME-格式"><a href="#52-如何正确得知某张图片的-MIME-格式" class="headerlink" title="52.如何正确得知某张图片的 MIME 格式"></a>52.如何正确得知某张图片的 MIME 格式</h2><h2 id="53-判断以下路由，将会响应哪一个路由"><a href="#53-判断以下路由，将会响应哪一个路由" class="headerlink" title="53.判断以下路由，将会响应哪一个路由"></a>53.判断以下路由，将会响应哪一个路由</h2><h2 id="54-请简述重新登录-refresh-token-的原理"><a href="#54-请简述重新登录-refresh-token-的原理" class="headerlink" title="54.请简述重新登录 refresh token 的原理"></a>54.请简述重新登录 refresh token 的原理</h2><h2 id="55-简述-koa-的中间件原理，手写-koa-compose-代码"><a href="#55-简述-koa-的中间件原理，手写-koa-compose-代码" class="headerlink" title="55.简述 koa 的中间件原理，手写 koa-compose 代码"></a>55.简述 koa 的中间件原理，手写 koa-compose 代码</h2><h2 id="56-在-Node-中如何读写文件"><a href="#56-在-Node-中如何读写文件" class="headerlink" title="56.在 Node 中如何读写文件"></a>56.在 Node 中如何读写文件</h2><h2 id="57-在-Node-中如何发送请求"><a href="#57-在-Node-中如何发送请求" class="headerlink" title="57.在 Node 中如何发送请求"></a>57.在 Node 中如何发送请求</h2><h2 id="58-Node-中服务端框架如何解析-http-的请求体-body"><a href="#58-Node-中服务端框架如何解析-http-的请求体-body" class="headerlink" title="58.Node 中服务端框架如何解析 http 的请求体 body"></a>58.Node 中服务端框架如何解析 http 的请求体 body</h2><h2 id="59-在-Node-中流-stream-分为几类，有哪些应用场景"><a href="#59-在-Node-中流-stream-分为几类，有哪些应用场景" class="headerlink" title="59.在 Node 中流 (stream) 分为几类，有哪些应用场景"></a>59.在 Node 中流 (stream) 分为几类，有哪些应用场景</h2><h2 id="60-请简述下-Node-与浏览器环境中的事件循环"><a href="#60-请简述下-Node-与浏览器环境中的事件循环" class="headerlink" title="60.请简述下 Node 与浏览器环境中的事件循环"></a>60.请简述下 Node 与浏览器环境中的事件循环</h2><h2 id="61-在-Node-中如何读取可读流的内容"><a href="#61-在-Node-中如何读取可读流的内容" class="headerlink" title="61.在 Node 中如何读取可读流的内容"></a>61.在 Node 中如何读取可读流的内容</h2><h2 id="62-在-Node-中如何读取大文件的内容"><a href="#62-在-Node-中如何读取大文件的内容" class="headerlink" title="62.在 Node 中如何读取大文件的内容"></a>62.在 Node 中如何读取大文件的内容</h2><h2 id="63-有没有使用过-Node-的-inspect-这个核心模块"><a href="#63-有没有使用过-Node-的-inspect-这个核心模块" class="headerlink" title="63.有没有使用过 Node 的 inspect 这个核心模块"></a>63.有没有使用过 Node 的 inspect 这个核心模块</h2><h1 id="React系列-共33题"><a href="#React系列-共33题" class="headerlink" title="React系列 共33题"></a>React系列 共33题</h1><h2 id="1-面试官：说说对React的理解？有哪些特性？-opens-new-window"><a href="#1-面试官：说说对React的理解？有哪些特性？-opens-new-window" class="headerlink" title="1.面试官：说说对React的理解？有哪些特性？(opens new window)"></a>1.面试官：说说对React的理解？有哪些特性？(opens new window)</h2><h2 id="2-面试官：说说-Real-DOM和-Virtual-DOM-的区别？优缺点？-opens-new-window"><a href="#2-面试官：说说-Real-DOM和-Virtual-DOM-的区别？优缺点？-opens-new-window" class="headerlink" title="2.面试官：说说 Real DOM和 Virtual DOM 的区别？优缺点？(opens new window)"></a>2.面试官：说说 Real DOM和 Virtual DOM 的区别？优缺点？(opens new window)</h2><h2 id="3-面试官：说说-React-生命周期有哪些不同阶段？每个阶段对应的方法是？-opens-new-window"><a href="#3-面试官：说说-React-生命周期有哪些不同阶段？每个阶段对应的方法是？-opens-new-window" class="headerlink" title="3.面试官：说说 React 生命周期有哪些不同阶段？每个阶段对应的方法是？(opens new window)"></a>3.面试官：说说 React 生命周期有哪些不同阶段？每个阶段对应的方法是？(opens new window)</h2><h2 id="4-面试官：state-和-props有什么区别？-opens-new-window"><a href="#4-面试官：state-和-props有什么区别？-opens-new-window" class="headerlink" title="4.面试官：state 和 props有什么区别？(opens new window)"></a>4.面试官：state 和 props有什么区别？(opens new window)</h2><h2 id="5-面试官：super-和super-props-有什么区别？-opens-new-window"><a href="#5-面试官：super-和super-props-有什么区别？-opens-new-window" class="headerlink" title="5.面试官：super()和super(props)有什么区别？(opens new window)"></a>5.面试官：super()和super(props)有什么区别？(opens new window)</h2><h2 id="6-面试官：说说React中的setState执行机制-opens-new-window"><a href="#6-面试官：说说React中的setState执行机制-opens-new-window" class="headerlink" title="6.面试官：说说React中的setState执行机制(opens new window)"></a>6.面试官：说说React中的setState执行机制(opens new window)</h2><h2 id="7-面试官：说说React的事件机制？-opens-new-window"><a href="#7-面试官：说说React的事件机制？-opens-new-window" class="headerlink" title="7.面试官：说说React的事件机制？(opens new window)"></a>7.面试官：说说React的事件机制？(opens new window)</h2><h2 id="8-面试官：React事件绑定的方式有哪些？区别？-opens-new-window"><a href="#8-面试官：React事件绑定的方式有哪些？区别？-opens-new-window" class="headerlink" title="8.面试官：React事件绑定的方式有哪些？区别？(opens new window)"></a>8.面试官：React事件绑定的方式有哪些？区别？(opens new window)</h2><h2 id="9-面试官：React构建组件的方式有哪些？区别？-opens-new-window"><a href="#9-面试官：React构建组件的方式有哪些？区别？-opens-new-window" class="headerlink" title="9.面试官：React构建组件的方式有哪些？区别？(opens new window)"></a>9.面试官：React构建组件的方式有哪些？区别？(opens new window)</h2><h2 id="10-面试官：React中组件之间如何通信？-opens-new-window"><a href="#10-面试官：React中组件之间如何通信？-opens-new-window" class="headerlink" title="10.面试官：React中组件之间如何通信？(opens new window)"></a>10.面试官：React中组件之间如何通信？(opens new window)</h2><h2 id="11-面试官：React中的key有什么作用？-opens-new-window"><a href="#11-面试官：React中的key有什么作用？-opens-new-window" class="headerlink" title="11.面试官：React中的key有什么作用？(opens new window)"></a>11.面试官：React中的key有什么作用？(opens new window)</h2><h2 id="12-面试官：说说对React-refs-的理解？应用场景？-opens-new-window"><a href="#12-面试官：说说对React-refs-的理解？应用场景？-opens-new-window" class="headerlink" title="12.面试官：说说对React refs 的理解？应用场景？(opens new window)"></a>12.面试官：说说对React refs 的理解？应用场景？(opens new window)</h2><h2 id="13-面试官：说说对React中类组件和函数组件的理解？有什么区别？-opens-new-window"><a href="#13-面试官：说说对React中类组件和函数组件的理解？有什么区别？-opens-new-window" class="headerlink" title="13.面试官：说说对React中类组件和函数组件的理解？有什么区别？(opens new window)"></a>13.面试官：说说对React中类组件和函数组件的理解？有什么区别？(opens new window)</h2><h2 id="14-面试官：说说对受控组件和非受控组件的理解？应用场景？-opens-new-window"><a href="#14-面试官：说说对受控组件和非受控组件的理解？应用场景？-opens-new-window" class="headerlink" title="14.面试官：说说对受控组件和非受控组件的理解？应用场景？(opens new window)"></a>14.面试官：说说对受控组件和非受控组件的理解？应用场景？(opens new window)</h2><h2 id="15-面试官：说说对高阶组件的理解？应用场景-opens-new-window"><a href="#15-面试官：说说对高阶组件的理解？应用场景-opens-new-window" class="headerlink" title="15.面试官：说说对高阶组件的理解？应用场景?(opens new window)"></a>15.面试官：说说对高阶组件的理解？应用场景?(opens new window)</h2><h2 id="16-面试官：说说对React-Hooks的理解？解决了什么问题？-opens-new-window"><a href="#16-面试官：说说对React-Hooks的理解？解决了什么问题？-opens-new-window" class="headerlink" title="16.面试官：说说对React Hooks的理解？解决了什么问题？(opens new window)"></a>16.面试官：说说对React Hooks的理解？解决了什么问题？(opens new window)</h2><h2 id="17-面试官：说说react中引入css的方式有哪几种？区别？-opens-new-window"><a href="#17-面试官：说说react中引入css的方式有哪几种？区别？-opens-new-window" class="headerlink" title="17.面试官：说说react中引入css的方式有哪几种？区别？(opens new window)"></a>17.面试官：说说react中引入css的方式有哪几种？区别？(opens new window)</h2><h2 id="18-面试官：在react中组件间过渡动画如何实现？-opens-new-window"><a href="#18-面试官：在react中组件间过渡动画如何实现？-opens-new-window" class="headerlink" title="18.面试官：在react中组件间过渡动画如何实现？(opens new window)"></a>18.面试官：在react中组件间过渡动画如何实现？(opens new window)</h2><h2 id="19-面试官：说说你对Redux的理解？其工作原理？-opens-new-window"><a href="#19-面试官：说说你对Redux的理解？其工作原理？-opens-new-window" class="headerlink" title="19.面试官：说说你对Redux的理解？其工作原理？(opens new window)"></a>19.面试官：说说你对Redux的理解？其工作原理？(opens new window)</h2><h2 id="20-面试官：说说对Redux中间件的理解？常用的中间件有哪些？实现原理？-opens-new-window"><a href="#20-面试官：说说对Redux中间件的理解？常用的中间件有哪些？实现原理？-opens-new-window" class="headerlink" title="20.面试官：说说对Redux中间件的理解？常用的中间件有哪些？实现原理？(opens new window)"></a>20.面试官：说说对Redux中间件的理解？常用的中间件有哪些？实现原理？(opens new window)</h2><h2 id="21-面试官：你在React项目中是如何使用Redux的-项目结构是如何划分的？-opens-new-window"><a href="#21-面试官：你在React项目中是如何使用Redux的-项目结构是如何划分的？-opens-new-window" class="headerlink" title="21.面试官：你在React项目中是如何使用Redux的? 项目结构是如何划分的？(opens new window)"></a>21.面试官：你在React项目中是如何使用Redux的? 项目结构是如何划分的？(opens new window)</h2><h2 id="22-面试官：说说你对React-Router的理解？常用的Router组件有哪些？-opens-new-window"><a href="#22-面试官：说说你对React-Router的理解？常用的Router组件有哪些？-opens-new-window" class="headerlink" title="22.面试官：说说你对React Router的理解？常用的Router组件有哪些？(opens new window)"></a>22.面试官：说说你对React Router的理解？常用的Router组件有哪些？(opens new window)</h2><h2 id="23-面试官：说说React-Router有几种模式？实现原理？-opens-new-window"><a href="#23-面试官：说说React-Router有几种模式？实现原理？-opens-new-window" class="headerlink" title="23.面试官：说说React Router有几种模式？实现原理？(opens new window)"></a>23.面试官：说说React Router有几种模式？实现原理？(opens new window)</h2><h2 id="24-面试官：说说你对immutable的理解？如何应用在react项目中？-opens-new-window"><a href="#24-面试官：说说你对immutable的理解？如何应用在react项目中？-opens-new-window" class="headerlink" title="24.面试官：说说你对immutable的理解？如何应用在react项目中？(opens new window)"></a>24.面试官：说说你对immutable的理解？如何应用在react项目中？(opens new window)</h2><h2 id="25-面试官：说说React-render方法的原理？在什么时候会被触发？-opens-new-window"><a href="#25-面试官：说说React-render方法的原理？在什么时候会被触发？-opens-new-window" class="headerlink" title="25.面试官：说说React render方法的原理？在什么时候会被触发？(opens new window)"></a>25.面试官：说说React render方法的原理？在什么时候会被触发？(opens new window)</h2><h2 id="26-面试官：说说你是如何提高组件的渲染效率的？在React中如何避免不必要的render？-opens-new-window"><a href="#26-面试官：说说你是如何提高组件的渲染效率的？在React中如何避免不必要的render？-opens-new-window" class="headerlink" title="26.面试官：说说你是如何提高组件的渲染效率的？在React中如何避免不必要的render？(opens new window)"></a>26.面试官：说说你是如何提高组件的渲染效率的？在React中如何避免不必要的render？(opens new window)</h2><h2 id="27-面试官：说说React-diff的原理是什么？-opens-new-window"><a href="#27-面试官：说说React-diff的原理是什么？-opens-new-window" class="headerlink" title="27.面试官：说说React diff的原理是什么？(opens new window)"></a>27.面试官：说说React diff的原理是什么？(opens new window)</h2><h2 id="28-面试官：说说对Fiber架构的理解？解决了什么问题？-opens-new-window"><a href="#28-面试官：说说对Fiber架构的理解？解决了什么问题？-opens-new-window" class="headerlink" title="28.面试官：说说对Fiber架构的理解？解决了什么问题？(opens new window)"></a>28.面试官：说说对Fiber架构的理解？解决了什么问题？(opens new window)</h2><h2 id="29-面试官：说说React-Jsx转换成真实DOM过程？-opens-new-window"><a href="#29-面试官：说说React-Jsx转换成真实DOM过程？-opens-new-window" class="headerlink" title="29.面试官：说说React Jsx转换成真实DOM过程？(opens new window)"></a>29.面试官：说说React Jsx转换成真实DOM过程？(opens new window)</h2><h2 id="30-面试官：说说-React-性能优化的手段有哪些？-opens-new-window"><a href="#30-面试官：说说-React-性能优化的手段有哪些？-opens-new-window" class="headerlink" title="30.面试官：说说 React 性能优化的手段有哪些？ (opens new window)"></a>30.面试官：说说 React 性能优化的手段有哪些？ (opens new window)</h2><h2 id="31-面试官：说说你在React项目是如何捕获错误的？-opens-new-window"><a href="#31-面试官：说说你在React项目是如何捕获错误的？-opens-new-window" class="headerlink" title="31.面试官：说说你在React项目是如何捕获错误的？(opens new window)"></a>31.面试官：说说你在React项目是如何捕获错误的？(opens new window)</h2><h2 id="32-面试官：说说React服务端渲染怎么做？原理是什么？-opens-new-window"><a href="#32-面试官：说说React服务端渲染怎么做？原理是什么？-opens-new-window" class="headerlink" title="32.面试官：说说React服务端渲染怎么做？原理是什么？(opens new window)"></a>32.面试官：说说React服务端渲染怎么做？原理是什么？(opens new window)</h2><h2 id="33-面试官：说说你在使用React-过程中遇到的常见问题？如何解决-opens-new-window"><a href="#33-面试官：说说你在使用React-过程中遇到的常见问题？如何解决-opens-new-window" class="headerlink" title="33.面试官：说说你在使用React 过程中遇到的常见问题？如何解决?(opens new window)"></a>33.面试官：说说你在使用React 过程中遇到的常见问题？如何解决?(opens new window)</h2><h1 id="版本控制系列-共10题"><a href="#版本控制系列-共10题" class="headerlink" title="版本控制系列 共10题"></a>版本控制系列 共10题</h1><h2 id="1-面试官：说说你对版本管理的理解？常用的版本管理工具有哪些？-opens-new-window"><a href="#1-面试官：说说你对版本管理的理解？常用的版本管理工具有哪些？-opens-new-window" class="headerlink" title="1.面试官：说说你对版本管理的理解？常用的版本管理工具有哪些？(opens new window)"></a>1.面试官：说说你对版本管理的理解？常用的版本管理工具有哪些？(opens new window)</h2><h2 id="2-面试官：说说你对Git的理解？-opens-new-window"><a href="#2-面试官：说说你对Git的理解？-opens-new-window" class="headerlink" title="2.面试官：说说你对Git的理解？(opens new window)"></a>2.面试官：说说你对Git的理解？(opens new window)</h2><h2 id="3-面试官：说说Git中-fork-clone-branch这三个概念，有什么区别-opens-new-window"><a href="#3-面试官：说说Git中-fork-clone-branch这三个概念，有什么区别-opens-new-window" class="headerlink" title="3.面试官：说说Git中 fork, clone,branch这三个概念，有什么区别?(opens new window)"></a>3.面试官：说说Git中 fork, clone,branch这三个概念，有什么区别?(opens new window)</h2><h2 id="4-面试官：说说Git常用的命令有哪些？-opens-new-window"><a href="#4-面试官：说说Git常用的命令有哪些？-opens-new-window" class="headerlink" title="4.面试官：说说Git常用的命令有哪些？(opens new window)"></a>4.面试官：说说Git常用的命令有哪些？(opens new window)</h2><h2 id="5-面试官：说说Git-中-HEAD、工作树和索引之间的区别？-opens-new-window"><a href="#5-面试官：说说Git-中-HEAD、工作树和索引之间的区别？-opens-new-window" class="headerlink" title="5.面试官：说说Git 中 HEAD、工作树和索引之间的区别？(opens new window)"></a>5.面试官：说说Git 中 HEAD、工作树和索引之间的区别？(opens new window)</h2><h2 id="6-面试官：说说对git-pull-和-git-fetch-的理解？有什么区别？-opens-new-window"><a href="#6-面试官：说说对git-pull-和-git-fetch-的理解？有什么区别？-opens-new-window" class="headerlink" title="6.面试官：说说对git pull 和 git fetch 的理解？有什么区别？(opens new window)"></a>6.面试官：说说对git pull 和 git fetch 的理解？有什么区别？(opens new window)</h2><h2 id="7-面试官：说说你对git-stash-的理解？应用场景？-opens-new-window"><a href="#7-面试官：说说你对git-stash-的理解？应用场景？-opens-new-window" class="headerlink" title="7.面试官：说说你对git stash 的理解？应用场景？(opens new window)"></a>7.面试官：说说你对git stash 的理解？应用场景？(opens new window)</h2><h2 id="8-面试官：说说你对git-rebase-和-git-merge的理解？区别？-opens-new-window"><a href="#8-面试官：说说你对git-rebase-和-git-merge的理解？区别？-opens-new-window" class="headerlink" title="8.面试官：说说你对git rebase 和 git merge的理解？区别？(opens new window)"></a>8.面试官：说说你对git rebase 和 git merge的理解？区别？(opens new window)</h2><h2 id="9-面试官：说说-git-发生冲突的场景？如何解决？-opens-new-window"><a href="#9-面试官：说说-git-发生冲突的场景？如何解决？-opens-new-window" class="headerlink" title="9.面试官：说说 git 发生冲突的场景？如何解决？(opens new window)"></a>9.面试官：说说 git 发生冲突的场景？如何解决？(opens new window)</h2><h2 id="10-面试官：说说你对git-reset-和-git-revert-的理解？区别？-opens-new-window"><a href="#10-面试官：说说你对git-reset-和-git-revert-的理解？区别？-opens-new-window" class="headerlink" title="10.面试官：说说你对git reset 和 git revert 的理解？区别？(opens new window)"></a>10.面试官：说说你对git reset 和 git revert 的理解？区别？(opens new window)</h2><h1 id="操作系统系列-共7题"><a href="#操作系统系列-共7题" class="headerlink" title="操作系统系列 共7题"></a>操作系统系列 共7题</h1><h2 id="1-面试官：说说你对操作系统的理解？核心概念有哪些？-opens-new-window"><a href="#1-面试官：说说你对操作系统的理解？核心概念有哪些？-opens-new-window" class="headerlink" title="1.面试官：说说你对操作系统的理解？核心概念有哪些？(opens new window)"></a>1.面试官：说说你对操作系统的理解？核心概念有哪些？(opens new window)</h2><h2 id="2-面试官：说说什么是进程？什么是线程？区别？-opens-new-window"><a href="#2-面试官：说说什么是进程？什么是线程？区别？-opens-new-window" class="headerlink" title="2.面试官：说说什么是进程？什么是线程？区别？(opens new window)"></a>2.面试官：说说什么是进程？什么是线程？区别？(opens new window)</h2><h2 id="3-面试官：说说-linux系统下-文件操作常用的命令有哪些？-opens-new-window"><a href="#3-面试官：说说-linux系统下-文件操作常用的命令有哪些？-opens-new-window" class="headerlink" title="3.面试官：说说 linux系统下 文件操作常用的命令有哪些？(opens new window)"></a>3.面试官：说说 linux系统下 文件操作常用的命令有哪些？(opens new window)</h2><h2 id="4-面试官：说说-linux-系统下-文本编辑常用的命令有哪些？-opens-new-window"><a href="#4-面试官：说说-linux-系统下-文本编辑常用的命令有哪些？-opens-new-window" class="headerlink" title="4.面试官：说说 linux 系统下 文本编辑常用的命令有哪些？(opens new window)"></a>4.面试官：说说 linux 系统下 文本编辑常用的命令有哪些？(opens new window)</h2><h2 id="5-面试官：说说你对-linux-用户管理的理解？相关的命令有哪些？-opens-new-window"><a href="#5-面试官：说说你对-linux-用户管理的理解？相关的命令有哪些？-opens-new-window" class="headerlink" title="5.面试官：说说你对 linux 用户管理的理解？相关的命令有哪些？(opens new window)"></a>5.面试官：说说你对 linux 用户管理的理解？相关的命令有哪些？(opens new window)</h2><h2 id="6-面试官：说说你对输入输出重定向和管道的理解？应用场景？-opens-new-window"><a href="#6-面试官：说说你对输入输出重定向和管道的理解？应用场景？-opens-new-window" class="headerlink" title="6.面试官：说说你对输入输出重定向和管道的理解？应用场景？(opens new window)"></a>6.面试官：说说你对输入输出重定向和管道的理解？应用场景？(opens new window)</h2><h2 id="7-面试官：说说你对-shell-的理解？常见的命令？-opens-new-window"><a href="#7-面试官：说说你对-shell-的理解？常见的命令？-opens-new-window" class="headerlink" title="7.面试官：说说你对 shell 的理解？常见的命令？(opens new window)"></a>7.面试官：说说你对 shell 的理解？常见的命令？(opens new window)</h2><h1 id="typescript系列-共12题"><a href="#typescript系列-共12题" class="headerlink" title="typescript系列 共12题"></a>typescript系列 共12题</h1><h2 id="1-面试官：说说你对-typescript-的理解？与-javascript-的区别？-opens-new-window"><a href="#1-面试官：说说你对-typescript-的理解？与-javascript-的区别？-opens-new-window" class="headerlink" title="1.面试官：说说你对 typescript 的理解？与 javascript 的区别？(opens new window)"></a>1.面试官：说说你对 typescript 的理解？与 javascript 的区别？(opens new window)</h2><h2 id="2-面试官：说说-typescript-的数据类型有哪些？-opens-new-window"><a href="#2-面试官：说说-typescript-的数据类型有哪些？-opens-new-window" class="headerlink" title="2.面试官：说说 typescript 的数据类型有哪些？(opens new window)"></a>2.面试官：说说 typescript 的数据类型有哪些？(opens new window)</h2><h2 id="3-面试官：说说你对-TypeScript-中枚举类型的理解？应用场景？-opens-new-window"><a href="#3-面试官：说说你对-TypeScript-中枚举类型的理解？应用场景？-opens-new-window" class="headerlink" title="3.面试官：说说你对 TypeScript 中枚举类型的理解？应用场景？(opens new window)"></a>3.面试官：说说你对 TypeScript 中枚举类型的理解？应用场景？(opens new window)</h2><h2 id="4-面试官：说说你对-TypeScript-中接口的理解？应用场景？-opens-new-window"><a href="#4-面试官：说说你对-TypeScript-中接口的理解？应用场景？-opens-new-window" class="headerlink" title="4.面试官：说说你对 TypeScript 中接口的理解？应用场景？(opens new window)"></a>4.面试官：说说你对 TypeScript 中接口的理解？应用场景？(opens new window)</h2><h2 id="5-面试官：说说你对-TypeScript-中类的理解？应用场景？-opens-new-window"><a href="#5-面试官：说说你对-TypeScript-中类的理解？应用场景？-opens-new-window" class="headerlink" title="5.面试官：说说你对 TypeScript 中类的理解？应用场景？(opens new window)"></a>5.面试官：说说你对 TypeScript 中类的理解？应用场景？(opens new window)</h2><h2 id="6-面试官：说说你对-TypeScript-中函数的理解？与-JavaScript-函数的区别？-opens-new-window"><a href="#6-面试官：说说你对-TypeScript-中函数的理解？与-JavaScript-函数的区别？-opens-new-window" class="headerlink" title="6.面试官：说说你对 TypeScript 中函数的理解？与 JavaScript 函数的区别？(opens new window)"></a>6.面试官：说说你对 TypeScript 中函数的理解？与 JavaScript 函数的区别？(opens new window)</h2><h2 id="7-面试官：说说你对-TypeScript-中泛型的理解？应用场景？-opens-new-window"><a href="#7-面试官：说说你对-TypeScript-中泛型的理解？应用场景？-opens-new-window" class="headerlink" title="7.面试官：说说你对 TypeScript 中泛型的理解？应用场景？(opens new window)"></a>7.面试官：说说你对 TypeScript 中泛型的理解？应用场景？(opens new window)</h2><h2 id="8-面试官：说说你对-TypeScript-中高级类型的理解？有哪些？-opens-new-window"><a href="#8-面试官：说说你对-TypeScript-中高级类型的理解？有哪些？-opens-new-window" class="headerlink" title="8.面试官：说说你对 TypeScript 中高级类型的理解？有哪些？(opens new window)"></a>8.面试官：说说你对 TypeScript 中高级类型的理解？有哪些？(opens new window)</h2><h2 id="9-面试官：说说你对-TypeScript-装饰器的理解？应用场景？-opens-new-window"><a href="#9-面试官：说说你对-TypeScript-装饰器的理解？应用场景？-opens-new-window" class="headerlink" title="9.面试官：说说你对 TypeScript 装饰器的理解？应用场景？(opens new window)"></a>9.面试官：说说你对 TypeScript 装饰器的理解？应用场景？(opens new window)</h2><h2 id="10-面试官：说说对-TypeScript-中命名空间与模块的理解？区别？-opens-new-window"><a href="#10-面试官：说说对-TypeScript-中命名空间与模块的理解？区别？-opens-new-window" class="headerlink" title="10.面试官：说说对 TypeScript 中命名空间与模块的理解？区别？(opens new window)"></a>10.面试官：说说对 TypeScript 中命名空间与模块的理解？区别？(opens new window)</h2><h2 id="11-面试官：说说如何在React项目中应用TypeScript？-opens-new-window"><a href="#11-面试官：说说如何在React项目中应用TypeScript？-opens-new-window" class="headerlink" title="11.面试官：说说如何在React项目中应用TypeScript？(opens new window)"></a>11.面试官：说说如何在React项目中应用TypeScript？(opens new window)</h2><h2 id="12-面试官：说说如何在Vue项目中应用TypeScript？-opens-new-window"><a href="#12-面试官：说说如何在Vue项目中应用TypeScript？-opens-new-window" class="headerlink" title="12.面试官：说说如何在Vue项目中应用TypeScript？(opens new window)"></a>12.面试官：说说如何在Vue项目中应用TypeScript？(opens new window)</h2><h1 id="算法系列-共18题"><a href="#算法系列-共18题" class="headerlink" title="算法系列 共18题"></a>算法系列 共18题</h1><h2 id="1-面试官：说说你对算法的理解？应用场景？-opens-new-window"><a href="#1-面试官：说说你对算法的理解？应用场景？-opens-new-window" class="headerlink" title="1.面试官：说说你对算法的理解？应用场景？(opens new window)"></a>1.面试官：说说你对算法的理解？应用场景？(opens new window)</h2><h2 id="2-面试官：说说你对算法中时间复杂度，空间复杂度的理解？如何计算？-opens-new-window"><a href="#2-面试官：说说你对算法中时间复杂度，空间复杂度的理解？如何计算？-opens-new-window" class="headerlink" title="2.面试官：说说你对算法中时间复杂度，空间复杂度的理解？如何计算？(opens new window)"></a>2.面试官：说说你对算法中时间复杂度，空间复杂度的理解？如何计算？(opens new window)</h2><h2 id="3-面试官：说说你对数据结构的理解？有哪些？区别？-opens-new-window"><a href="#3-面试官：说说你对数据结构的理解？有哪些？区别？-opens-new-window" class="headerlink" title="3.面试官：说说你对数据结构的理解？有哪些？区别？(opens new window)"></a>3.面试官：说说你对数据结构的理解？有哪些？区别？(opens new window)</h2><h2 id="4-面试官：说说你对栈、队列的理解？应用场景？-opens-new-window"><a href="#4-面试官：说说你对栈、队列的理解？应用场景？-opens-new-window" class="headerlink" title="4.面试官：说说你对栈、队列的理解？应用场景？(opens new window)"></a>4.面试官：说说你对栈、队列的理解？应用场景？(opens new window)</h2><h2 id="5-面试官：说说你对链表的理解？常见的操作有哪些？-opens-new-window"><a href="#5-面试官：说说你对链表的理解？常见的操作有哪些？-opens-new-window" class="headerlink" title="5.面试官：说说你对链表的理解？常见的操作有哪些？(opens new window)"></a>5.面试官：说说你对链表的理解？常见的操作有哪些？(opens new window)</h2><h2 id="6-面试官：说说你对集合的理解？常见的操作有哪些？-opens-new-window"><a href="#6-面试官：说说你对集合的理解？常见的操作有哪些？-opens-new-window" class="headerlink" title="6.面试官：说说你对集合的理解？常见的操作有哪些？(opens new window)"></a>6.面试官：说说你对集合的理解？常见的操作有哪些？(opens new window)</h2><h2 id="7-面试官：说说你对树的理解？相关的操作有哪些？-opens-new-window"><a href="#7-面试官：说说你对树的理解？相关的操作有哪些？-opens-new-window" class="headerlink" title="7.面试官：说说你对树的理解？相关的操作有哪些？(opens new window)"></a>7.面试官：说说你对树的理解？相关的操作有哪些？(opens new window)</h2><h2 id="8-面试官：说说你对堆的理解？如何实现？应用场景？-opens-new-window"><a href="#8-面试官：说说你对堆的理解？如何实现？应用场景？-opens-new-window" class="headerlink" title="8.面试官：说说你对堆的理解？如何实现？应用场景？(opens new window)"></a>8.面试官：说说你对堆的理解？如何实现？应用场景？(opens new window)</h2><h2 id="9-面试官：说说你对图的理解？相关操作有哪些？-opens-new-window"><a href="#9-面试官：说说你对图的理解？相关操作有哪些？-opens-new-window" class="headerlink" title="9.面试官：说说你对图的理解？相关操作有哪些？(opens new window)"></a>9.面试官：说说你对图的理解？相关操作有哪些？(opens new window)</h2><h2 id="10-面试官：说说常见的排序算法有哪些？区别？-opens-new-window"><a href="#10-面试官：说说常见的排序算法有哪些？区别？-opens-new-window" class="headerlink" title="10.面试官：说说常见的排序算法有哪些？区别？(opens new window)"></a>10.面试官：说说常见的排序算法有哪些？区别？(opens new window)</h2><h2 id="11-面试官：说说你对冒泡排序的理解？如何实现？应用场景？-opens-new-window"><a href="#11-面试官：说说你对冒泡排序的理解？如何实现？应用场景？-opens-new-window" class="headerlink" title="11.面试官：说说你对冒泡排序的理解？如何实现？应用场景？(opens new window)"></a>11.面试官：说说你对冒泡排序的理解？如何实现？应用场景？(opens new window)</h2><h2 id="12-面试官：说说你对选择排序的理解？如何实现？应用场景？-opens-new-window"><a href="#12-面试官：说说你对选择排序的理解？如何实现？应用场景？-opens-new-window" class="headerlink" title="12.面试官：说说你对选择排序的理解？如何实现？应用场景？(opens new window)"></a>12.面试官：说说你对选择排序的理解？如何实现？应用场景？(opens new window)</h2><h2 id="13-面试官：说说你对插入排序的理解？如何实现？应用场景？-opens-new-window"><a href="#13-面试官：说说你对插入排序的理解？如何实现？应用场景？-opens-new-window" class="headerlink" title="13.面试官：说说你对插入排序的理解？如何实现？应用场景？(opens new window)"></a>13.面试官：说说你对插入排序的理解？如何实现？应用场景？(opens new window)</h2><h2 id="14-面试官：说说你对归并排序的理解？如何实现？应用场景？-opens-new-window"><a href="#14-面试官：说说你对归并排序的理解？如何实现？应用场景？-opens-new-window" class="headerlink" title="14.面试官：说说你对归并排序的理解？如何实现？应用场景？(opens new window)"></a>14.面试官：说说你对归并排序的理解？如何实现？应用场景？(opens new window)</h2><h2 id="15-面试官：说说你对快速排序的理解？如何实现？应用场景？-opens-new-window"><a href="#15-面试官：说说你对快速排序的理解？如何实现？应用场景？-opens-new-window" class="headerlink" title="15.面试官：说说你对快速排序的理解？如何实现？应用场景？(opens new window)"></a>15.面试官：说说你对快速排序的理解？如何实现？应用场景？(opens new window)</h2><h2 id="16-面试官：说说你对二分查找的理解？如何实现？应用场景？-opens-new-window"><a href="#16-面试官：说说你对二分查找的理解？如何实现？应用场景？-opens-new-window" class="headerlink" title="16.面试官：说说你对二分查找的理解？如何实现？应用场景？(opens new window)"></a>16.面试官：说说你对二分查找的理解？如何实现？应用场景？(opens new window)</h2><h2 id="17-面试官：说说你对分而治之、动态规划的理解？区别？-opens-new-window"><a href="#17-面试官：说说你对分而治之、动态规划的理解？区别？-opens-new-window" class="headerlink" title="17.面试官：说说你对分而治之、动态规划的理解？区别？(opens new window)"></a>17.面试官：说说你对分而治之、动态规划的理解？区别？(opens new window)</h2><h2 id="18-面试官：说说你对贪心算法、回溯算法的理解？应用场景？-opens-new-window"><a href="#18-面试官：说说你对贪心算法、回溯算法的理解？应用场景？-opens-new-window" class="headerlink" title="18.面试官：说说你对贪心算法、回溯算法的理解？应用场景？(opens new window)"></a>18.面试官：说说你对贪心算法、回溯算法的理解？应用场景？(opens new window)</h2><h1 id="小程序系列-共8题"><a href="#小程序系列-共8题" class="headerlink" title="小程序系列 共8题"></a>小程序系列 共8题</h1><h2 id="1-面试官：说说你对微信小程序的理解？优缺点？-opens-new-window"><a href="#1-面试官：说说你对微信小程序的理解？优缺点？-opens-new-window" class="headerlink" title="1.面试官：说说你对微信小程序的理解？优缺点？(opens new window)"></a>1.面试官：说说你对微信小程序的理解？优缺点？(opens new window)</h2><h2 id="2-面试官：说说微信小程序的生命周期函数有哪些？-opens-new-window"><a href="#2-面试官：说说微信小程序的生命周期函数有哪些？-opens-new-window" class="headerlink" title="2.面试官：说说微信小程序的生命周期函数有哪些？(opens new window)"></a>2.面试官：说说微信小程序的生命周期函数有哪些？(opens new window)</h2><h2 id="3-面试官：说说微信小程序中路由跳转的方式有哪些？区别？-opens-new-window"><a href="#3-面试官：说说微信小程序中路由跳转的方式有哪些？区别？-opens-new-window" class="headerlink" title="3.面试官：说说微信小程序中路由跳转的方式有哪些？区别？(opens new window)"></a>3.面试官：说说微信小程序中路由跳转的方式有哪些？区别？(opens new window)</h2><h2 id="4-面试官：说说提高微信小程序的应用速度的手段有哪些？-opens-new-window"><a href="#4-面试官：说说提高微信小程序的应用速度的手段有哪些？-opens-new-window" class="headerlink" title="4.面试官：说说提高微信小程序的应用速度的手段有哪些？(opens new window)"></a>4.面试官：说说提高微信小程序的应用速度的手段有哪些？(opens new window)</h2><h2 id="5-面试官：说说微信小程序的登录流程？-opens-new-window"><a href="#5-面试官：说说微信小程序的登录流程？-opens-new-window" class="headerlink" title="5.面试官：说说微信小程序的登录流程？(opens new window)"></a>5.面试官：说说微信小程序的登录流程？(opens new window)</h2><h2 id="6-面试官：说说微信小程序的发布流程？-opens-new-window"><a href="#6-面试官：说说微信小程序的发布流程？-opens-new-window" class="headerlink" title="6.面试官：说说微信小程序的发布流程？(opens new window)"></a>6.面试官：说说微信小程序的发布流程？(opens new window)</h2><h2 id="7-面试官：说说微信小程序的支付流程？-opens-new-window"><a href="#7-面试官：说说微信小程序的支付流程？-opens-new-window" class="headerlink" title="7.面试官：说说微信小程序的支付流程？(opens new window)"></a>7.面试官：说说微信小程序的支付流程？(opens new window)</h2><h2 id="8-面试官：说说微信小程序的实现原理？-opens-new-window"><a href="#8-面试官：说说微信小程序的实现原理？-opens-new-window" class="headerlink" title="8.面试官：说说微信小程序的实现原理？(opens new window)"></a>8.面试官：说说微信小程序的实现原理？(opens new window)</h2><h1 id="设计模式系列-共6题"><a href="#设计模式系列-共6题" class="headerlink" title="设计模式系列 共6题"></a>设计模式系列 共6题</h1><h2 id="1-面试官：说说对设计模式的理解？常见的设计模式有哪些？-opens-new-window"><a href="#1-面试官：说说对设计模式的理解？常见的设计模式有哪些？-opens-new-window" class="headerlink" title="1.面试官：说说对设计模式的理解？常见的设计模式有哪些？(opens new window)"></a>1.面试官：说说对设计模式的理解？常见的设计模式有哪些？(opens new window)</h2><h2 id="2-面试官：说说你对单例模式的理解？如何实现？-opens-new-window"><a href="#2-面试官：说说你对单例模式的理解？如何实现？-opens-new-window" class="headerlink" title="2.面试官：说说你对单例模式的理解？如何实现？(opens new window)"></a>2.面试官：说说你对单例模式的理解？如何实现？(opens new window)</h2><h2 id="3-面试官：说说你对工厂模式的理解？应用场景？-opens-new-window"><a href="#3-面试官：说说你对工厂模式的理解？应用场景？-opens-new-window" class="headerlink" title="3.面试官：说说你对工厂模式的理解？应用场景？(opens new window)"></a>3.面试官：说说你对工厂模式的理解？应用场景？(opens new window)</h2><h2 id="4-面试官：说说你对策略模式的理解？应用场景？-opens-new-window"><a href="#4-面试官：说说你对策略模式的理解？应用场景？-opens-new-window" class="headerlink" title="4.面试官：说说你对策略模式的理解？应用场景？(opens new window)"></a>4.面试官：说说你对策略模式的理解？应用场景？(opens new window)</h2><h2 id="5-面试官：说说你对代理模式的理解？应用场景？-opens-new-window"><a href="#5-面试官：说说你对代理模式的理解？应用场景？-opens-new-window" class="headerlink" title="5.面试官：说说你对代理模式的理解？应用场景？(opens new window)"></a>5.面试官：说说你对代理模式的理解？应用场景？(opens new window)</h2><h2 id="6-面试官：说说你对发布订阅、观察者模式的理解？区别？-opens-new-window"><a href="#6-面试官：说说你对发布订阅、观察者模式的理解？区别？-opens-new-window" class="headerlink" title="6.面试官：说说你对发布订阅、观察者模式的理解？区别？(opens new window)"></a>6.面试官：说说你对发布订阅、观察者模式的理解？区别？(opens new window)</h2><h1 id="性能优化-共6题"><a href="#性能优化-共6题" class="headerlink" title="性能优化 共6题"></a>性能优化 共6题</h1><h2 id="1-prefetch-与-preload-的区别是什么"><a href="#1-prefetch-与-preload-的区别是什么" class="headerlink" title="1.prefetch 与 preload 的区别是什么"></a>1.prefetch 与 preload 的区别是什么</h2><h2 id="2-实现一个-once-函数，记忆返回结果只执行一次"><a href="#2-实现一个-once-函数，记忆返回结果只执行一次" class="headerlink" title="2.实现一个 once 函数，记忆返回结果只执行一次"></a>2.实现一个 once 函数，记忆返回结果只执行一次</h2><h2 id="3-如何压缩前端项目中-JS-的体积"><a href="#3-如何压缩前端项目中-JS-的体积" class="headerlink" title="3.如何压缩前端项目中 JS 的体积"></a>3.如何压缩前端项目中 JS 的体积</h2><h2 id="4-如何优化-React-项目的性能"><a href="#4-如何优化-React-项目的性能" class="headerlink" title="4.如何优化 React 项目的性能"></a>4.如何优化 React 项目的性能</h2><h2 id="5-如何提高首屏渲染时间？"><a href="#5-如何提高首屏渲染时间？" class="headerlink" title="5.如何提高首屏渲染时间？"></a>5.如何提高首屏渲染时间？</h2><h2 id="6-网站性能优化中，如何对小图片进行优化"><a href="#6-网站性能优化中，如何对小图片进行优化" class="headerlink" title="6.网站性能优化中，如何对小图片进行优化"></a>6.网站性能优化中，如何对小图片进行优化</h2><h1 id="前端工程化-共79题"><a href="#前端工程化-共79题" class="headerlink" title="前端工程化 共79题"></a>前端工程化 共79题</h1><h2 id="1-当新入职一家公司时，如何快速搭建开发环境并让应用跑起来"><a href="#1-当新入职一家公司时，如何快速搭建开发环境并让应用跑起来" class="headerlink" title="1.当新入职一家公司时，如何快速搭建开发环境并让应用跑起来"></a>1.当新入职一家公司时，如何快速搭建开发环境并让应用跑起来</h2><h3 id="npm-run-dev-与-npm-start-的区别"><a href="#npm-run-dev-与-npm-start-的区别" class="headerlink" title="npm run dev 与 npm start 的区别"></a>npm run dev 与 npm start 的区别</h3><h2 id="2-网站性能优化都有哪些点"><a href="#2-网站性能优化都有哪些点" class="headerlink" title="2.网站性能优化都有哪些点"></a>2.网站性能优化都有哪些点</h2><h2 id="3-你们的前端代码上线部署一次需要多长时间，需要人为干预吗"><a href="#3-你们的前端代码上线部署一次需要多长时间，需要人为干预吗" class="headerlink" title="3.你们的前端代码上线部署一次需要多长时间，需要人为干预吗"></a>3.你们的前端代码上线部署一次需要多长时间，需要人为干预吗</h2><h2 id="4-有没有用-npm-发布过-package，如何发布"><a href="#4-有没有用-npm-发布过-package，如何发布" class="headerlink" title="4.有没有用 npm 发布过 package，如何发布"></a>4.有没有用 npm 发布过 package，如何发布</h2><h2 id="5-js-代码压缩-minify-的原理是什么"><a href="#5-js-代码压缩-minify-的原理是什么" class="headerlink" title="5.js 代码压缩 minify 的原理是什么"></a>5.js 代码压缩 minify 的原理是什么</h2><h3 id="1-去除多余字符-空格，换行及注释-1"><a href="#1-去除多余字符-空格，换行及注释-1" class="headerlink" title="1.去除多余字符: 空格，换行及注释"></a>1.去除多余字符: 空格，换行及注释</h3><h3 id="2-压缩变量名：变量名，函数名及属性名-1"><a href="#2-压缩变量名：变量名，函数名及属性名-1" class="headerlink" title="2.压缩变量名：变量名，函数名及属性名"></a>2.压缩变量名：变量名，函数名及属性名</h3><h3 id="3-解析程序逻辑：合并声明以及布尔值简化-1"><a href="#3-解析程序逻辑：合并声明以及布尔值简化-1" class="headerlink" title="3.解析程序逻辑：合并声明以及布尔值简化"></a>3.解析程序逻辑：合并声明以及布尔值简化</h3><h3 id="4-解析程序逻辑-编译预计算-1"><a href="#4-解析程序逻辑-编译预计算-1" class="headerlink" title="4.解析程序逻辑: 编译预计算"></a>4.解析程序逻辑: 编译预计算</h3><h2 id="6-权限设计中的-RABC-是指什么"><a href="#6-权限设计中的-RABC-是指什么" class="headerlink" title="6.权限设计中的 RABC 是指什么"></a>6.权限设计中的 RABC 是指什么</h2><h2 id="7-如何进行代码质量检测"><a href="#7-如何进行代码质量检测" class="headerlink" title="7.如何进行代码质量检测"></a>7.如何进行代码质量检测</h2><h2 id="8-performance-API-中什么指标可以衡量首屏时间"><a href="#8-performance-API-中什么指标可以衡量首屏时间" class="headerlink" title="8.performance API 中什么指标可以衡量首屏时间"></a>8.performance API 中什么指标可以衡量首屏时间</h2><h2 id="9-什么是-Open-Graph-协议，用来做什么"><a href="#9-什么是-Open-Graph-协议，用来做什么" class="headerlink" title="9.什么是 Open Graph 协议，用来做什么"></a>9.什么是 Open Graph 协议，用来做什么</h2><h2 id="10-简述你们前端项目中资源的缓存配置策略"><a href="#10-简述你们前端项目中资源的缓存配置策略" class="headerlink" title="10.简述你们前端项目中资源的缓存配置策略"></a>10.简述你们前端项目中资源的缓存配置策略</h2><h2 id="11-如何加速-npm-install"><a href="#11-如何加速-npm-install" class="headerlink" title="11.如何加速 npm install"></a>11.如何加速 npm install</h2><h2 id="12-npm-i-与-npm-ci-的区别是什么"><a href="#12-npm-i-与-npm-ci-的区别是什么" class="headerlink" title="12.npm i 与 npm ci 的区别是什么"></a>12.npm i 与 npm ci 的区别是什么</h2><h2 id="13-package-lock-json-有什么作用，如果项目中没有它会怎么样，举例说明"><a href="#13-package-lock-json-有什么作用，如果项目中没有它会怎么样，举例说明" class="headerlink" title="13.package-lock.json 有什么作用，如果项目中没有它会怎么样，举例说明"></a>13.package-lock.json 有什么作用，如果项目中没有它会怎么样，举例说明</h2><h2 id="14-前端如何进行多分支部署"><a href="#14-前端如何进行多分支部署" class="headerlink" title="14.前端如何进行多分支部署"></a>14.前端如何进行多分支部署</h2><h2 id="15-主域名的-SEO-是否比二级域名要更好"><a href="#15-主域名的-SEO-是否比二级域名要更好" class="headerlink" title="15.主域名的 SEO 是否比二级域名要更好"></a>15.主域名的 SEO 是否比二级域名要更好</h2><h2 id="16-刚刚启动了一个服务，如何知道这个服务对应的端口号是多少"><a href="#16-刚刚启动了一个服务，如何知道这个服务对应的端口号是多少" class="headerlink" title="16.刚刚启动了一个服务，如何知道这个服务对应的端口号是多少"></a>16.刚刚启动了一个服务，如何知道这个服务对应的端口号是多少</h2><h2 id="17-图片防盗链原理是什么"><a href="#17-图片防盗链原理是什么" class="headerlink" title="17.图片防盗链原理是什么"></a>17.图片防盗链原理是什么</h2><h2 id="18-你如何看待-serverless"><a href="#18-你如何看待-serverless" class="headerlink" title="18.你如何看待 serverless"></a>18.你如何看待 serverless</h2><h2 id="19-什么是-XSS-攻击，如何避免"><a href="#19-什么是-XSS-攻击，如何避免" class="headerlink" title="19.什么是 XSS 攻击，如何避免"></a>19.什么是 XSS 攻击，如何避免</h2><h2 id="20-如何查看你们-JS-项目中应采用的-node-版本"><a href="#20-如何查看你们-JS-项目中应采用的-node-版本" class="headerlink" title="20.如何查看你们 JS 项目中应采用的 node 版本"></a>20.如何查看你们 JS 项目中应采用的 node 版本</h2><h2 id="21-如何查看-node-modules-某一文件夹-的体积有多大"><a href="#21-如何查看-node-modules-某一文件夹-的体积有多大" class="headerlink" title="21.如何查看 node_modules(某一文件夹) 的体积有多大"></a>21.如何查看 node_modules(某一文件夹) 的体积有多大</h2><h2 id="22-peerDependency-是为了解决什么问题"><a href="#22-peerDependency-是为了解决什么问题" class="headerlink" title="22.peerDependency 是为了解决什么问题"></a>22.peerDependency 是为了解决什么问题</h2><h2 id="23-semver-指什么，试图解释一下"><a href="#23-semver-指什么，试图解释一下" class="headerlink" title="23.semver 指什么，试图解释一下"></a>23.semver 指什么，试图解释一下</h2><h2 id="24-optionalDependencies-的使用场景是什么"><a href="#24-optionalDependencies-的使用场景是什么" class="headerlink" title="24.optionalDependencies 的使用场景是什么"></a>24.optionalDependencies 的使用场景是什么</h2><h2 id="25-package-lock-json-与-yarn-lock-有什么区别"><a href="#25-package-lock-json-与-yarn-lock-有什么区别" class="headerlink" title="25.package-lock.json 与 yarn.lock 有什么区别"></a>25.package-lock.json 与 yarn.lock 有什么区别</h2><h2 id="26-如何为你们的前端项目选择状态管理器"><a href="#26-如何为你们的前端项目选择状态管理器" class="headerlink" title="26.如何为你们的前端项目选择状态管理器"></a>26.如何为你们的前端项目选择状态管理器</h2><h2 id="27-什么是浏览器的关键渲染路径"><a href="#27-什么是浏览器的关键渲染路径" class="headerlink" title="27.什么是浏览器的关键渲染路径"></a>27.什么是浏览器的关键渲染路径</h2><h3 id="1-DOM"><a href="#1-DOM" class="headerlink" title="1.DOM"></a>1.DOM</h3><h3 id="2-CSSOM"><a href="#2-CSSOM" class="headerlink" title="2.CSSOM"></a>2.CSSOM</h3><h3 id="3-Render-Tree"><a href="#3-Render-Tree" class="headerlink" title="3.Render Tree"></a>3.Render Tree</h3><h3 id="4-Layout"><a href="#4-Layout" class="headerlink" title="4.Layout"></a>4.Layout</h3><h3 id="5-Paint"><a href="#5-Paint" class="headerlink" title="5.Paint"></a>5.Paint</h3><h2 id="28-你使用过哪些前端性能分析工具"><a href="#28-你使用过哪些前端性能分析工具" class="headerlink" title="28.你使用过哪些前端性能分析工具"></a>28.你使用过哪些前端性能分析工具</h2><h2 id="29-你有没有重客户端状态前端应用的经验"><a href="#29-你有没有重客户端状态前端应用的经验" class="headerlink" title="29.你有没有重客户端状态前端应用的经验"></a>29.你有没有重客户端状态前端应用的经验</h2><h2 id="30-什么是安全的正则表达式"><a href="#30-什么是安全的正则表达式" class="headerlink" title="30.什么是安全的正则表达式"></a>30.什么是安全的正则表达式</h2><h2 id="31-在-nginx-中如何配置负载均衡"><a href="#31-在-nginx-中如何配置负载均衡" class="headerlink" title="31.在 nginx 中如何配置负载均衡"></a>31.在 nginx 中如何配置负载均衡</h2><h3 id="1-Round-Robin"><a href="#1-Round-Robin" class="headerlink" title="1.Round_Robin"></a>1.Round_Robin</h3><h3 id="2-Weighted-Round-Robin"><a href="#2-Weighted-Round-Robin" class="headerlink" title="2.Weighted_Round_Robin"></a>2.Weighted_Round_Robin</h3><h3 id="3-IP-hash"><a href="#3-IP-hash" class="headerlink" title="3.IP_hash"></a>3.IP_hash</h3><h3 id="4-Least-Connection"><a href="#4-Least-Connection" class="headerlink" title="4.Least Connection"></a>4.Least Connection</h3><h2 id="32-前端打包时-cjs、es、umd-模块有何不同"><a href="#32-前端打包时-cjs、es、umd-模块有何不同" class="headerlink" title="32.前端打包时 cjs、es、umd 模块有何不同"></a>32.前端打包时 cjs、es、umd 模块有何不同</h2><h3 id="1-cjs-commonjs"><a href="#1-cjs-commonjs" class="headerlink" title="1.cjs (commonjs)"></a>1.cjs (commonjs)</h3><h3 id="2-esm-es-module"><a href="#2-esm-es-module" class="headerlink" title="2.esm (es module)"></a>2.esm (es module)</h3><h3 id="3-umd"><a href="#3-umd" class="headerlink" title="3.umd"></a>3.umd</h3><h2 id="33-什么是前端工程化"><a href="#33-什么是前端工程化" class="headerlink" title="33.什么是前端工程化"></a>33.什么是前端工程化</h2><h2 id="34-JWT-的原理是什么"><a href="#34-JWT-的原理是什么" class="headerlink" title="34.JWT 的原理是什么"></a>34.JWT 的原理是什么</h2><h2 id="35-什么是服务器渲染-SSR"><a href="#35-什么是服务器渲染-SSR" class="headerlink" title="35.什么是服务器渲染 (SSR)"></a>35.什么是服务器渲染 (SSR)</h2><h2 id="36-Core-Web-Vitals-是什么，它有哪些指标"><a href="#36-Core-Web-Vitals-是什么，它有哪些指标" class="headerlink" title="36.Core Web Vitals 是什么，它有哪些指标"></a>36.Core Web Vitals 是什么，它有哪些指标</h2><h2 id="37-dependencies-与-devDependencies-有何区别"><a href="#37-dependencies-与-devDependencies-有何区别" class="headerlink" title="37.dependencies 与 devDependencies 有何区别"></a>37.dependencies 与 devDependencies 有何区别</h2><h2 id="38-如何确认你们项目是否依赖某一个依赖项"><a href="#38-如何确认你们项目是否依赖某一个依赖项" class="headerlink" title="38.如何确认你们项目是否依赖某一个依赖项"></a>38.如何确认你们项目是否依赖某一个依赖项</h2><h2 id="39-当你引入某一个依赖项时，你引入的是该依赖下的哪一个文件"><a href="#39-当你引入某一个依赖项时，你引入的是该依赖下的哪一个文件" class="headerlink" title="39.当你引入某一个依赖项时，你引入的是该依赖下的哪一个文件"></a>39.当你引入某一个依赖项时，你引入的是该依赖下的哪一个文件</h2><h2 id="40-npm-workspaces-解决了什么问题"><a href="#40-npm-workspaces-解决了什么问题" class="headerlink" title="40.npm workspaces 解决了什么问题"></a>40.npm workspaces 解决了什么问题</h2><h2 id="41-如何为一个项目指定-node-版本号"><a href="#41-如何为一个项目指定-node-版本号" class="headerlink" title="41.如何为一个项目指定 node 版本号"></a>41.如何为一个项目指定 node 版本号</h2><h2 id="42-什么是-semver，-1-2-3-与-1-2-3-的版本号范围是多少"><a href="#42-什么是-semver，-1-2-3-与-1-2-3-的版本号范围是多少" class="headerlink" title="42.什么是 semver，~1.2.3 与 ^1.2.3 的版本号范围是多少"></a>42.什么是 semver，~1.2.3 与 ^1.2.3 的版本号范围是多少</h2><h2 id="43-package-json-中-main-module-browser-exports-字段有何区别"><a href="#43-package-json-中-main-module-browser-exports-字段有何区别" class="headerlink" title="43.package.json 中 main/module/browser/exports 字段有何区别"></a>43.package.json 中 main/module/browser/exports 字段有何区别</h2><h3 id="1-main"><a href="#1-main" class="headerlink" title="1.main"></a>1.main</h3><h3 id="2-module"><a href="#2-module" class="headerlink" title="2.module"></a>2.module</h3><h3 id="3-exports"><a href="#3-exports" class="headerlink" title="3.exports"></a>3.exports</h3><h2 id="44-npm-publish-时-npm-script-的生命周期"><a href="#44-npm-publish-时-npm-script-的生命周期" class="headerlink" title="44.npm publish 时 npm script 的生命周期"></a>44.npm publish 时 npm script 的生命周期</h2><h2 id="45-前端项目每次-npm-install-之后需要执行一些处理工作，应该怎么办"><a href="#45-前端项目每次-npm-install-之后需要执行一些处理工作，应该怎么办" class="headerlink" title="45.前端项目每次 npm install 之后需要执行一些处理工作，应该怎么办"></a>45.前端项目每次 npm install 之后需要执行一些处理工作，应该怎么办</h2><h2 id="46-你是如何保障你们项目质量的"><a href="#46-你是如何保障你们项目质量的" class="headerlink" title="46.你是如何保障你们项目质量的"></a>46.你是如何保障你们项目质量的</h2><h2 id="47-如何正确得知某张图片的-MIME-格式"><a href="#47-如何正确得知某张图片的-MIME-格式" class="headerlink" title="47.如何正确得知某张图片的 MIME 格式"></a>47.如何正确得知某张图片的 MIME 格式</h2><h2 id="48-现代前端应用应如何配置-HTTP-缓存机制"><a href="#48-现代前端应用应如何配置-HTTP-缓存机制" class="headerlink" title="48.现代前端应用应如何配置 HTTP 缓存机制"></a>48.现代前端应用应如何配置 HTTP 缓存机制</h2><h2 id="49-使用-webpack-如何分包"><a href="#49-使用-webpack-如何分包" class="headerlink" title="49.使用 webpack 如何分包"></a>49.使用 webpack 如何分包</h2><h2 id="50-引入-BFF-层的优势在哪里"><a href="#50-引入-BFF-层的优势在哪里" class="headerlink" title="50.引入 BFF 层的优势在哪里"></a>50.引入 BFF 层的优势在哪里</h2><h2 id="51-同一页面三个组件请求同一个-API-发送了三次请求，如何优化"><a href="#51-同一页面三个组件请求同一个-API-发送了三次请求，如何优化" class="headerlink" title="51.同一页面三个组件请求同一个 API 发送了三次请求，如何优化"></a>51.同一页面三个组件请求同一个 API 发送了三次请求，如何优化</h2><h2 id="52-如何压缩前端项目中-JS-的体积"><a href="#52-如何压缩前端项目中-JS-的体积" class="headerlink" title="52.如何压缩前端项目中 JS 的体积"></a>52.如何压缩前端项目中 JS 的体积</h2><h2 id="53-你们项目中使用了哪些依赖-第三方库"><a href="#53-你们项目中使用了哪些依赖-第三方库" class="headerlink" title="53.你们项目中使用了哪些依赖/第三方库"></a>53.你们项目中使用了哪些依赖/第三方库</h2><h2 id="54-如何禁止打开浏览器控制台"><a href="#54-如何禁止打开浏览器控制台" class="headerlink" title="54.如何禁止打开浏览器控制台"></a>54.如何禁止打开浏览器控制台</h2><h2 id="55-如何提高首屏渲染时间？"><a href="#55-如何提高首屏渲染时间？" class="headerlink" title="55.如何提高首屏渲染时间？"></a>55.如何提高首屏渲染时间？</h2><h2 id="56-npm-执行命令传递参数时，为何需要双横线"><a href="#56-npm-执行命令传递参数时，为何需要双横线" class="headerlink" title="56.npm 执行命令传递参数时，为何需要双横线"></a>56.npm 执行命令传递参数时，为何需要双横线</h2><h2 id="57-http-client-中如何得知已接收完所有响应数据"><a href="#57-http-client-中如何得知已接收完所有响应数据" class="headerlink" title="57.http client 中如何得知已接收完所有响应数据"></a>57.http client 中如何得知已接收完所有响应数据</h2><h2 id="58-core-js-是做什么用的？"><a href="#58-core-js-是做什么用的？" class="headerlink" title="58.core-js 是做什么用的？"></a>58.core-js 是做什么用的？</h2><h2 id="59-如何处理白屏错误页的监控的？"><a href="#59-如何处理白屏错误页的监控的？" class="headerlink" title="59.如何处理白屏错误页的监控的？"></a>59.如何处理白屏错误页的监控的？</h2><h2 id="60-简述-npm-script-的生命周期"><a href="#60-简述-npm-script-的生命周期" class="headerlink" title="60.简述 npm script 的生命周期"></a>60.简述 npm script 的生命周期</h2><h3 id="1-一个-npm-script-的生命周期"><a href="#1-一个-npm-script-的生命周期" class="headerlink" title="1.一个 npm script 的生命周期"></a>1.一个 npm script 的生命周期</h3><h3 id="2-一个最常用的生命周期"><a href="#2-一个最常用的生命周期" class="headerlink" title="2.一个最常用的生命周期"></a>2.一个最常用的生命周期</h3><h3 id="3-npm-script-钩子的风险"><a href="#3-npm-script-钩子的风险" class="headerlink" title="3.npm script 钩子的风险"></a>3.npm script 钩子的风险</h3><h2 id="61-git-hooks-原理是什么"><a href="#61-git-hooks-原理是什么" class="headerlink" title="61.git hooks 原理是什么"></a>61.git hooks 原理是什么</h2><h2 id="62-请简述下-eslint-的作用"><a href="#62-请简述下-eslint-的作用" class="headerlink" title="62.请简述下 eslint 的作用"></a>62.请简述下 eslint 的作用</h2><h3 id="1-Rule"><a href="#1-Rule" class="headerlink" title="1.Rule"></a>1.Rule</h3><h3 id="2-Plugin"><a href="#2-Plugin" class="headerlink" title="2.Plugin"></a>2.Plugin</h3><h3 id="3-Config"><a href="#3-Config" class="headerlink" title="3.Config"></a>3.Config</h3><h2 id="63-在项目中，如何平滑升级-npm-包"><a href="#63-在项目中，如何平滑升级-npm-包" class="headerlink" title="63.在项目中，如何平滑升级 npm 包"></a>63.在项目中，如何平滑升级 npm 包</h2><h3 id="1-自动发现更新"><a href="#1-自动发现更新" class="headerlink" title="1.自动发现更新"></a>1.自动发现更新</h3><h3 id="2-自动更新版本号"><a href="#2-自动更新版本号" class="headerlink" title="2.自动更新版本号"></a>2.自动更新版本号</h3><h3 id="3-一点小建议"><a href="#3-一点小建议" class="headerlink" title="3.一点小建议"></a>3.一点小建议</h3><h2 id="64-请描述-node-modules-的目录结构-拓扑结构"><a href="#64-请描述-node-modules-的目录结构-拓扑结构" class="headerlink" title="64.请描述 node_modules 的目录结构(拓扑结构)"></a>64.请描述 node_modules 的目录结构(拓扑结构)</h2><h3 id="1-基础"><a href="#1-基础" class="headerlink" title="1.基础"></a>1.基础</h3><h3 id="2-很久以前-嵌套结构"><a href="#2-很久以前-嵌套结构" class="headerlink" title="2.很久以前: 嵌套结构"></a>2.很久以前: 嵌套结构</h3><h3 id="3-现在阶段-平铺结构"><a href="#3-现在阶段-平铺结构" class="headerlink" title="3.现在阶段: 平铺结构"></a>3.现在阶段: 平铺结构</h3><h3 id="4-重复的版本依赖有什么问题？"><a href="#4-重复的版本依赖有什么问题？" class="headerlink" title="4.重复的版本依赖有什么问题？"></a>4.重复的版本依赖有什么问题？</h3><h2 id="65-npm-第三方库需要提交-lockfile-吗"><a href="#65-npm-第三方库需要提交-lockfile-吗" class="headerlink" title="65.npm 第三方库需要提交 lockfile 吗"></a>65.npm 第三方库需要提交 lockfile 吗</h2><h3 id="1-为何有人说第三方库不需要提交-package-lock-json-yarn-lock？"><a href="#1-为何有人说第三方库不需要提交-package-lock-json-yarn-lock？" class="headerlink" title="1.为何有人说第三方库不需要提交 package-lock.json/yarn.lock？"></a>1.为何有人说第三方库不需要提交 package-lock.json/yarn.lock？</h3><h3 id="2-第三方库如何解决潜在的间接依赖不可控问题"><a href="#2-第三方库如何解决潜在的间接依赖不可控问题" class="headerlink" title="2.第三方库如何解决潜在的间接依赖不可控问题"></a>2.第三方库如何解决潜在的间接依赖不可控问题</h3><h3 id="3-总结"><a href="#3-总结" class="headerlink" title="3.总结"></a>3.总结</h3><h2 id="66-请问什么是-CICD"><a href="#66-请问什么是-CICD" class="headerlink" title="66.请问什么是 CICD"></a>66.请问什么是 CICD</h2><h3 id="1-CICD-工具"><a href="#1-CICD-工具" class="headerlink" title="1.CICD 工具"></a>1.CICD 工具</h3><h3 id="2-一段简单的-CICD-配置"><a href="#2-一段简单的-CICD-配置" class="headerlink" title="2.一段简单的 CICD 配置"></a>2.一段简单的 CICD 配置</h3><h2 id="67-如何使用-docker-部署前端"><a href="#67-如何使用-docker-部署前端" class="headerlink" title="67.如何使用 docker 部署前端"></a>67.如何使用 docker 部署前端</h2><h2 id="68-pnpm-有什么优势"><a href="#68-pnpm-有什么优势" class="headerlink" title="68.pnpm 有什么优势"></a>68.pnpm 有什么优势</h2><h3 id="1-软链接和硬链接"><a href="#1-软链接和硬链接" class="headerlink" title="1.软链接和硬链接"></a>1.软链接和硬链接</h3><h3 id="2-pnpm-为何节省空间"><a href="#2-pnpm-为何节省空间" class="headerlink" title="2.pnpm 为何节省空间"></a>2.pnpm 为何节省空间</h3><h2 id="69-浏览器中如何使用原生的-ESM"><a href="#69-浏览器中如何使用原生的-ESM" class="headerlink" title="69.浏览器中如何使用原生的 ESM"></a>69.浏览器中如何使用原生的 ESM</h2><h3 id="1-Native-Import-Import-from-URL"><a href="#1-Native-Import-Import-from-URL" class="headerlink" title="1.Native Import: Import from URL"></a>1.Native Import: Import from URL</h3><h3 id="2-ImportMap"><a href="#2-ImportMap" class="headerlink" title="2.ImportMap"></a>2.ImportMap</h3><h3 id="3-Import-Assertion"><a href="#3-Import-Assertion" class="headerlink" title="3.Import Assertion"></a>3.Import Assertion</h3><h2 id="70-如何将-CommonJS-转化为-ESM"><a href="#70-如何将-CommonJS-转化为-ESM" class="headerlink" title="70.如何将 CommonJS 转化为 ESM"></a>70.如何将 CommonJS 转化为 ESM</h2><h3 id="1-ESM-与-CommonJS-的导入导出的不同"><a href="#1-ESM-与-CommonJS-的导入导出的不同" class="headerlink" title="1.ESM 与 CommonJS 的导入导出的不同"></a>1.ESM 与 CommonJS 的导入导出的不同</h3><h3 id="2-exports-的转化"><a href="#2-exports-的转化" class="headerlink" title="2.exports 的转化"></a>2.exports 的转化</h3><h3 id="3-module-exports-的转化"><a href="#3-module-exports-的转化" class="headerlink" title="3.module.exports 的转化"></a>3.module.exports 的转化</h3><h3 id="4-一些复杂的转化"><a href="#4-一些复杂的转化" class="headerlink" title="4.一些复杂的转化"></a>4.一些复杂的转化</h3><h3 id="5-CommonJS-To-ESM-的构建工具"><a href="#5-CommonJS-To-ESM-的构建工具" class="headerlink" title="5.CommonJS To ESM 的构建工具"></a>5.CommonJS To ESM 的构建工具</h3><h2 id="71-如何对-npm-package-进行发包"><a href="#71-如何对-npm-package-进行发包" class="headerlink" title="71.如何对 npm package 进行发包"></a>71.如何对 npm package 进行发包</h2><h3 id="1-准备工作：一个账号"><a href="#1-准备工作：一个账号" class="headerlink" title="1.准备工作：一个账号"></a>1.准备工作：一个账号</h3><h3 id="2-发包"><a href="#2-发包" class="headerlink" title="2.发包"></a>2.发包</h3><h3 id="3-实际发包的内容"><a href="#3-实际发包的内容" class="headerlink" title="3.实际发包的内容"></a>3.实际发包的内容</h3><h3 id="4-发包的实际流程"><a href="#4-发包的实际流程" class="headerlink" title="4.发包的实际流程"></a>4.发包的实际流程</h3><h2 id="72-什么是-AST，及其应用"><a href="#72-什么是-AST，及其应用" class="headerlink" title="72.什么是 AST，及其应用"></a>72.什么是 AST，及其应用</h2><h3 id="1-AST-的生成"><a href="#1-AST-的生成" class="headerlink" title="1.AST 的生成"></a>1.AST 的生成</h3><h3 id="2-实践"><a href="#2-实践" class="headerlink" title="2.实践"></a>2.实践</h3><h2 id="73-简述-browserslist-的意义"><a href="#73-简述-browserslist-的意义" class="headerlink" title="73.简述 browserslist 的意义"></a>73.简述 browserslist 的意义</h2><h3 id="1-原理"><a href="#1-原理" class="headerlink" title="1.原理"></a>1.原理</h3><h3 id="2-一些常用的查询语法"><a href="#2-一些常用的查询语法" class="headerlink" title="2.一些常用的查询语法"></a>2.一些常用的查询语法</h3><h2 id="74-简述-bundless-的优势与不足"><a href="#74-简述-bundless-的优势与不足" class="headerlink" title="74.简述 bundless 的优势与不足"></a>74.简述 bundless 的优势与不足</h2><h2 id="75-简述-npm-cache"><a href="#75-简述-npm-cache" class="headerlink" title="75.简述 npm cache"></a>75.简述 npm cache</h2><h2 id="76-如何修复某个-npm-包的紧急-bug"><a href="#76-如何修复某个-npm-包的紧急-bug" class="headerlink" title="76.如何修复某个 npm 包的紧急 bug"></a>76.如何修复某个 npm 包的紧急 bug</h2><h3 id="1-patch-package"><a href="#1-patch-package" class="headerlink" title="1.patch-package"></a>1.patch-package</h3><h2 id="77-前端如何进行高效的分包"><a href="#77-前端如何进行高效的分包" class="headerlink" title="77.前端如何进行高效的分包"></a>77.前端如何进行高效的分包</h2><h3 id="1-为什么需要分包？"><a href="#1-为什么需要分包？" class="headerlink" title="1.为什么需要分包？"></a>1.为什么需要分包？</h3><h3 id="2-如何更好的分包？"><a href="#2-如何更好的分包？" class="headerlink" title="2.如何更好的分包？"></a>2.如何更好的分包？</h3><h3 id="3-使用-webpack-分包"><a href="#3-使用-webpack-分包" class="headerlink" title="3.使用 webpack 分包"></a>3.使用 webpack 分包</h3><h2 id="78-前端如何对分支环境进行部署"><a href="#78-前端如何对分支环境进行部署" class="headerlink" title="78.前端如何对分支环境进行部署"></a>78.前端如何对分支环境进行部署</h2><h2 id="79-vite-中是如何处理-new-URL-资源的"><a href="#79-vite-中是如何处理-new-URL-资源的" class="headerlink" title="79.vite 中是如何处理 new URL 资源的"></a>79.vite 中是如何处理 new URL 资源的</h2><h1 id="webpack-共21题"><a href="#webpack-共21题" class="headerlink" title="webpack 共21题"></a>webpack 共21题</h1><h2 id="1-webpack-是用来做什么的，原理是什么"><a href="#1-webpack-是用来做什么的，原理是什么" class="headerlink" title="1.webpack 是用来做什么的，原理是什么"></a>1.webpack 是用来做什么的，原理是什么</h2><h2 id="2-webpack-中的-loader-的作用是什么"><a href="#2-webpack-中的-loader-的作用是什么" class="headerlink" title="2.webpack 中的 loader 的作用是什么"></a>2.webpack 中的 loader 的作用是什么</h2><h2 id="3-有没有自己写过一个-webpack-的-loader"><a href="#3-有没有自己写过一个-webpack-的-loader" class="headerlink" title="3.有没有自己写过一个 webpack 的 loader"></a>3.有没有自己写过一个 webpack 的 loader</h2><h2 id="4-webpack-中-plugin-的作用是什么，有没有自己写过"><a href="#4-webpack-中-plugin-的作用是什么，有没有自己写过" class="headerlink" title="4.webpack 中 plugin 的作用是什么，有没有自己写过"></a>4.webpack 中 plugin 的作用是什么，有没有自己写过</h2><h2 id="4-使用-webpack-时如何优化项目体积"><a href="#4-使用-webpack-时如何优化项目体积" class="headerlink" title="4.使用 webpack 时如何优化项目体积"></a>4.使用 webpack 时如何优化项目体积</h2><h2 id="5-webpack-中什么是-HMR，原理是什么"><a href="#5-webpack-中什么是-HMR，原理是什么" class="headerlink" title="5.webpack 中什么是 HMR，原理是什么"></a>5.webpack 中什么是 HMR，原理是什么</h2><h2 id="6-使用-webpack-打包时，如何更好地利用-long-term-cache"><a href="#6-使用-webpack-打包时，如何更好地利用-long-term-cache" class="headerlink" title="6.使用 webpack 打包时，如何更好地利用 long term cache"></a>6.使用 webpack 打包时，如何更好地利用 long term cache</h2><h3 id="1-一个问题与更强的永久缓存"><a href="#1-一个问题与更强的永久缓存" class="headerlink" title="1.一个问题与更强的永久缓存"></a>1.一个问题与更强的永久缓存</h3><h2 id="7-随着-http2-的发展，webpack-有没有更好的打包方案"><a href="#7-随着-http2-的发展，webpack-有没有更好的打包方案" class="headerlink" title="7.随着 http2 的发展，webpack 有没有更好的打包方案"></a>7.随着 http2 的发展，webpack 有没有更好的打包方案</h2><h2 id="8-Tree-Shaking-的原理是什么"><a href="#8-Tree-Shaking-的原理是什么" class="headerlink" title="8.Tree Shaking 的原理是什么"></a>8.Tree Shaking 的原理是什么</h2><h3 id="1-import"><a href="#1-import" class="headerlink" title="1.import *"></a>1.import *</h3><h3 id="2-JSON-TreeShaking"><a href="#2-JSON-TreeShaking" class="headerlink" title="2.JSON TreeShaking"></a>2.JSON TreeShaking</h3><h3 id="3-引入支持-Tree-Shaking-的-Package"><a href="#3-引入支持-Tree-Shaking-的-Package" class="headerlink" title="3.引入支持 Tree Shaking 的 Package"></a>3.引入支持 Tree Shaking 的 Package</h3><h2 id="9-vue-loader-的实现原理是什么"><a href="#9-vue-loader-的实现原理是什么" class="headerlink" title="9.vue-loader 的实现原理是什么"></a>9.vue-loader 的实现原理是什么</h2><h2 id="10-对于已经-import-但未实际使用的模块使用-webpack-还会对它打包吗？"><a href="#10-对于已经-import-但未实际使用的模块使用-webpack-还会对它打包吗？" class="headerlink" title="10.对于已经 import 但未实际使用的模块使用 webpack 还会对它打包吗？"></a>10.对于已经 import 但未实际使用的模块使用 webpack 还会对它打包吗？</h2><h2 id="11-Code-Splitting-的原理是什么"><a href="#11-Code-Splitting-的原理是什么" class="headerlink" title="11.Code Splitting 的原理是什么"></a>11.Code Splitting 的原理是什么</h2><h2 id="12-使用-webpack-如何分包"><a href="#12-使用-webpack-如何分包" class="headerlink" title="12.使用 webpack 如何分包"></a>12.使用 webpack 如何分包</h2><h2 id="13-如何压缩前端项目中-JS-的体积"><a href="#13-如何压缩前端项目中-JS-的体积" class="headerlink" title="13.如何压缩前端项目中 JS 的体积"></a>13.如何压缩前端项目中 JS 的体积</h2><h2 id="14-webpack-的-runtime-做了什么事情"><a href="#14-webpack-的-runtime-做了什么事情" class="headerlink" title="14.webpack 的 runtime 做了什么事情"></a>14.webpack 的 runtime 做了什么事情</h2><h3 id="1-Webpack-Runtime"><a href="#1-Webpack-Runtime" class="headerlink" title="1.Webpack Runtime"></a>1.Webpack Runtime</h3><h3 id="2-Rollup"><a href="#2-Rollup" class="headerlink" title="2.Rollup"></a>2.Rollup</h3><h2 id="15-webpack-中的-code-spliting-是如何动态加载-chunk-的？"><a href="#15-webpack-中的-code-spliting-是如何动态加载-chunk-的？" class="headerlink" title="15.webpack 中的 code spliting 是如何动态加载 chunk 的？"></a>15.webpack 中的 code spliting 是如何动态加载 chunk 的？</h2><h3 id="1-code-spliting"><a href="#1-code-spliting" class="headerlink" title="1.code spliting"></a>1.code spliting</h3><h3 id="2-运行时解析"><a href="#2-运行时解析" class="headerlink" title="2.运行时解析"></a>2.运行时解析</h3><h2 id="16-打包器-webpack-rollup-如何将打包后的-js-资源注入-html-中"><a href="#16-打包器-webpack-rollup-如何将打包后的-js-资源注入-html-中" class="headerlink" title="16.打包器(webpack/rollup) 如何将打包后的 js 资源注入 html 中"></a>16.打包器(webpack/rollup) 如何将打包后的 js 资源注入 html 中</h2><h2 id="17-打包器-webpack-rollup-如何加载-json、image-等非-Javascript-资源"><a href="#17-打包器-webpack-rollup-如何加载-json、image-等非-Javascript-资源" class="headerlink" title="17.打包器(webpack/rollup) 如何加载 json、image 等非 Javascript 资源"></a>17.打包器(webpack/rollup) 如何加载 json、image 等非 Javascript 资源</h2><h3 id="1-加载-JSON"><a href="#1-加载-JSON" class="headerlink" title="1.加载 JSON"></a>1.加载 JSON</h3><h3 id="2-加载图片"><a href="#2-加载图片" class="headerlink" title="2.加载图片"></a>2.加载图片</h3><h2 id="18-打包器-webpack-rollup-如何加载-style-样式资源"><a href="#18-打包器-webpack-rollup-如何加载-style-样式资源" class="headerlink" title="18.打包器(webpack/rollup) 如何加载 style 样式资源"></a>18.打包器(webpack/rollup) 如何加载 style 样式资源</h2><h3 id="1-现状"><a href="#1-现状" class="headerlink" title="1.现状"></a>1.现状</h3><h3 id="2-原理"><a href="#2-原理" class="headerlink" title="2.原理"></a>2.原理</h3><h2 id="19-如何提升-webpack-构建资源的速度"><a href="#19-如何提升-webpack-构建资源的速度" class="headerlink" title="19.如何提升 webpack 构建资源的速度"></a>19.如何提升 webpack 构建资源的速度</h2><h3 id="1-更快的-loader-swc"><a href="#1-更快的-loader-swc" class="headerlink" title="1.更快的 loader: swc"></a>1.更快的 loader: swc</h3><h3 id="2-持久化缓存-cache"><a href="#2-持久化缓存-cache" class="headerlink" title="2.持久化缓存: cache"></a>2.持久化缓存: cache</h3><h3 id="3-多进程-thread-loader"><a href="#3-多进程-thread-loader" class="headerlink" title="3.多进程: thread-loader"></a>3.多进程: thread-loader</h3><h2 id="20-如何分析前端打包体积"><a href="#20-如何分析前端打包体积" class="headerlink" title="20.如何分析前端打包体积"></a>20.如何分析前端打包体积</h2><h3 id="1-ANALYZE-环境变量"><a href="#1-ANALYZE-环境变量" class="headerlink" title="1.ANALYZE 环境变量"></a>1.ANALYZE 环境变量</h3><h2 id="21-webpack-中是如何处理-new-URL-资源的"><a href="#21-webpack-中是如何处理-new-URL-资源的" class="headerlink" title="21.webpack 中是如何处理 new URL 资源的"></a>21.webpack 中是如何处理 new URL 资源的</h2><h1 id="高频手写代码"><a href="#高频手写代码" class="headerlink" title="高频手写代码"></a>高频手写代码</h1><h2 id="1-什么是防抖和节流，他们的应用场景有哪些"><a href="#1-什么是防抖和节流，他们的应用场景有哪些" class="headerlink" title="1.什么是防抖和节流，他们的应用场景有哪些"></a>1.什么是防抖和节流，他们的应用场景有哪些</h2><h3 id="1-防抖-debounce"><a href="#1-防抖-debounce" class="headerlink" title="1.防抖 (debounce)"></a>1.防抖 (debounce)</h3><h3 id="2-节流-throttle"><a href="#2-节流-throttle" class="headerlink" title="2.节流 (throttle)"></a>2.节流 (throttle)</h3><h3 id="3-总结-简要答案"><a href="#3-总结-简要答案" class="headerlink" title="3.总结 (简要答案)"></a>3.总结 (简要答案)</h3><h2 id="2-如何实现一个简单的-Promise"><a href="#2-如何实现一个简单的-Promise" class="headerlink" title="2.如何实现一个简单的 Promise"></a>2.如何实现一个简单的 Promise</h2><h2 id="3-js-中如何实现-bind"><a href="#3-js-中如何实现-bind" class="headerlink" title="3.js 中如何实现 bind"></a>3.js 中如何实现 bind</h2><h2 id="4-如何实现-promise-map，限制-promise-并发数"><a href="#4-如何实现-promise-map，限制-promise-并发数" class="headerlink" title="4.如何实现 promise.map，限制 promise 并发数"></a>4.如何实现 promise.map，限制 promise 并发数</h2><h2 id="5-如何实现类似-lodash-get-函数"><a href="#5-如何实现类似-lodash-get-函数" class="headerlink" title="5.如何实现类似 lodash.get 函数"></a>5.如何实现类似 lodash.get 函数</h2><h2 id="6-如何实现一个深拷贝-cloneDeep"><a href="#6-如何实现一个深拷贝-cloneDeep" class="headerlink" title="6.如何实现一个深拷贝 (cloneDeep)"></a>6.如何实现一个深拷贝 (cloneDeep)</h2><h2 id="7-如何实现一个-flatMap-函数-头条"><a href="#7-如何实现一个-flatMap-函数-头条" class="headerlink" title="7.如何实现一个 flatMap 函数 (头条)"></a>7.如何实现一个 flatMap 函数 (头条)</h2><h2 id="8-如何实现一个-async-await"><a href="#8-如何实现一个-async-await" class="headerlink" title="8.如何实现一个 async/await"></a>8.如何实现一个 async/await</h2><h2 id="9-使用-js-实现一个-lru-cache"><a href="#9-使用-js-实现一个-lru-cache" class="headerlink" title="9.使用 js 实现一个 lru cache"></a>9.使用 js 实现一个 lru cache</h2><h2 id="10-如何实现-Promise-race"><a href="#10-如何实现-Promise-race" class="headerlink" title="10.如何实现 Promise.race"></a>10.如何实现 Promise.race</h2><h2 id="11-实现一个-once-函数，记忆返回结果只执行一次"><a href="#11-实现一个-once-函数，记忆返回结果只执行一次" class="headerlink" title="11.实现一个 once 函数，记忆返回结果只执行一次"></a>11.实现一个 once 函数，记忆返回结果只执行一次</h2><h2 id="12-如何找到当前页面出现次数最多的-HTML-标签"><a href="#12-如何找到当前页面出现次数最多的-HTML-标签" class="headerlink" title="12.如何找到当前页面出现次数最多的 HTML 标签"></a>12.如何找到当前页面出现次数最多的 HTML 标签</h2><h2 id="13-对以下字符串进行压缩编码"><a href="#13-对以下字符串进行压缩编码" class="headerlink" title="13.对以下字符串进行压缩编码"></a>13.对以下字符串进行压缩编码</h2><h2 id="14-如何实现一个无限累加的-sum-函数"><a href="#14-如何实现一个无限累加的-sum-函数" class="headerlink" title="14.如何实现一个无限累加的 sum 函数"></a>14.如何实现一个无限累加的 sum 函数</h2><h2 id="15-实现一个函数用来解析-URL-的-querystring"><a href="#15-实现一个函数用来解析-URL-的-querystring" class="headerlink" title="15.实现一个函数用来解析 URL 的 querystring"></a>15.实现一个函数用来解析 URL 的 querystring</h2><h2 id="16-JS-如何实现一个-sleep-delay-函数"><a href="#16-JS-如何实现一个-sleep-delay-函数" class="headerlink" title="16.JS 如何实现一个 sleep/delay 函数"></a>16.JS 如何实现一个 sleep/delay 函数</h2><h2 id="17-如何实现一个-sample-函数，从数组中随机取一个元素"><a href="#17-如何实现一个-sample-函数，从数组中随机取一个元素" class="headerlink" title="17.如何实现一个 sample 函数，从数组中随机取一个元素"></a>17.如何实现一个 sample 函数，从数组中随机取一个元素</h2><h2 id="18-JSONP-的原理是什么，如何实现"><a href="#18-JSONP-的原理是什么，如何实现" class="headerlink" title="18.JSONP 的原理是什么，如何实现"></a>18.JSONP 的原理是什么，如何实现</h2><h3 id="1-一个正常的请求-JSON-1"><a href="#1-一个正常的请求-JSON-1" class="headerlink" title="1.一个正常的请求: JSON"></a>1.一个正常的请求: JSON</h3><h3 id="2-一个-JSONP-请求-1"><a href="#2-一个-JSONP-请求-1" class="headerlink" title="2.一个 JSONP 请求"></a>2.一个 JSONP 请求</h3><h3 id="3-服务器端代码-1"><a href="#3-服务器端代码-1" class="headerlink" title="3.服务器端代码"></a>3.服务器端代码</h3><h4 id="4-完整代码附录-1"><a href="#4-完整代码附录-1" class="headerlink" title="4.完整代码附录"></a>4.完整代码附录</h4><h2 id="19-实现一个函数用来对-URL-的-querystring-进行编码"><a href="#19-实现一个函数用来对-URL-的-querystring-进行编码" class="headerlink" title="19.实现一个函数用来对 URL 的 querystring 进行编码"></a>19.实现一个函数用来对 URL 的 querystring 进行编码</h2><h2 id="20-实现一个数组扁平化的函数-flatten"><a href="#20-实现一个数组扁平化的函数-flatten" class="headerlink" title="20.实现一个数组扁平化的函数 flatten"></a>20.实现一个数组扁平化的函数 flatten</h2><h2 id="21-如何实现一个数组洗牌函数-shuffle"><a href="#21-如何实现一个数组洗牌函数-shuffle" class="headerlink" title="21.如何实现一个数组洗牌函数 shuffle"></a>21.如何实现一个数组洗牌函数 shuffle</h2><h2 id="22-如何实现一个函数-lodash-merge"><a href="#22-如何实现一个函数-lodash-merge" class="headerlink" title="22.如何实现一个函数 lodash.merge"></a>22.如何实现一个函数 lodash.merge</h2><h2 id="23-如何实现一个-Promise-all"><a href="#23-如何实现一个-Promise-all" class="headerlink" title="23.如何实现一个 Promise.all"></a>23.如何实现一个 Promise.all</h2><h2 id="24-实现一个-inherits-函数进行继承"><a href="#24-实现一个-inherits-函数进行继承" class="headerlink" title="24.实现一个 inherits 函数进行继承"></a>24.实现一个 inherits 函数进行继承</h2><h2 id="25-如何逆序一个字符串"><a href="#25-如何逆序一个字符串" class="headerlink" title="25.如何逆序一个字符串"></a>25.如何逆序一个字符串</h2><h2 id="26-给数字添加千位符"><a href="#26-给数字添加千位符" class="headerlink" title="26.给数字添加千位符"></a>26.给数字添加千位符</h2><h2 id="27-如何实现一个深比较的函数-deepEqual"><a href="#27-如何实现一个深比较的函数-deepEqual" class="headerlink" title="27.如何实现一个深比较的函数 deepEqual"></a>27.如何实现一个深比较的函数 deepEqual</h2><h2 id="28-在-JS-中如何监听-Object-某个属性值的变化"><a href="#28-在-JS-中如何监听-Object-某个属性值的变化" class="headerlink" title="28.在 JS 中如何监听 Object 某个属性值的变化"></a>28.在 JS 中如何监听 Object 某个属性值的变化</h2><h3 id="1-Proxy"><a href="#1-Proxy" class="headerlink" title="1.Proxy"></a>1.Proxy</h3><h3 id="2-Object-defineProperty"><a href="#2-Object-defineProperty" class="headerlink" title="2.Object.defineProperty"></a>2.Object.defineProperty</h3><h2 id="29-关于字符串编码解码进阶"><a href="#29-关于字符串编码解码进阶" class="headerlink" title="29.关于字符串编码解码进阶"></a>29.关于字符串编码解码进阶</h2><h2 id="30-如何使用-JS-实现一个发布订阅模式"><a href="#30-如何使用-JS-实现一个发布订阅模式" class="headerlink" title="30.如何使用 JS 实现一个发布订阅模式"></a>30.如何使用 JS 实现一个发布订阅模式</h2><h2 id="31-使用-JS-如何生成一个随机字符串"><a href="#31-使用-JS-如何生成一个随机字符串" class="headerlink" title="31.使用 JS 如何生成一个随机字符串"></a>31.使用 JS 如何生成一个随机字符串</h2><h2 id="32-如何判断一个数值为整数"><a href="#32-如何判断一个数值为整数" class="headerlink" title="32.如何判断一个数值为整数"></a>32.如何判断一个数值为整数</h2><h2 id="33-简述-koa-的中间件原理，手写-koa-compose-代码"><a href="#33-简述-koa-的中间件原理，手写-koa-compose-代码" class="headerlink" title="33.简述 koa 的中间件原理，手写 koa-compose 代码"></a>33.简述 koa 的中间件原理，手写 koa-compose 代码</h2><h2 id="34-实现一个函数-maxBy，根据给定条件找到最大的数组项"><a href="#34-实现一个函数-maxBy，根据给定条件找到最大的数组项" class="headerlink" title="34.实现一个函数 maxBy，根据给定条件找到最大的数组项"></a>34.实现一个函数 maxBy，根据给定条件找到最大的数组项</h2><h2 id="35-实现一个函数-max，找到数组中最大的一个值-两个值-N-个值"><a href="#35-实现一个函数-max，找到数组中最大的一个值-两个值-N-个值" class="headerlink" title="35.实现一个函数 max，找到数组中最大的一个值/两个值/N 个值"></a>35.实现一个函数 max，找到数组中最大的一个值/两个值/N 个值</h2><h2 id="36-统计字符串中出现次数最多的字符及次数"><a href="#36-统计字符串中出现次数最多的字符及次数" class="headerlink" title="36.统计字符串中出现次数最多的字符及次数"></a>36.统计字符串中出现次数最多的字符及次数</h2><h2 id="37-请输出-100-以内的菲波那切数列"><a href="#37-请输出-100-以内的菲波那切数列" class="headerlink" title="37.请输出 100 以内的菲波那切数列"></a>37.请输出 100 以内的菲波那切数列</h2><h2 id="38-如何使用正则匹配一个汉字"><a href="#38-如何使用正则匹配一个汉字" class="headerlink" title="38.如何使用正则匹配一个汉字"></a>38.如何使用正则匹配一个汉字</h2><h2 id="39-如何把字符串全部转化为小写格式"><a href="#39-如何把字符串全部转化为小写格式" class="headerlink" title="39.如何把字符串全部转化为小写格式"></a>39.如何把字符串全部转化为小写格式</h2><h2 id="40-如何实现数组函数-reduce"><a href="#40-如何实现数组函数-reduce" class="headerlink" title="40.如何实现数组函数 reduce"></a>40.如何实现数组函数 reduce</h2><h2 id="41-如何实现-chunk-函数，数组进行分组"><a href="#41-如何实现-chunk-函数，数组进行分组" class="headerlink" title="41.如何实现 chunk 函数，数组进行分组"></a>41.如何实现 chunk 函数，数组进行分组</h2><h2 id="42-实现一个异步的-sum-add"><a href="#42-实现一个异步的-sum-add" class="headerlink" title="42.实现一个异步的 sum/add"></a>42.实现一个异步的 sum/add</h2><h3 id="1-初级实现-串行方式"><a href="#1-初级实现-串行方式" class="headerlink" title="1.初级实现: 串行方式"></a>1.初级实现: 串行方式</h3><h3 id="2-中级实现-并行方式"><a href="#2-中级实现-并行方式" class="headerlink" title="2.中级实现: 并行方式"></a>2.中级实现: 并行方式</h3><h3 id="3-更进一步-控制并行数"><a href="#3-更进一步-控制并行数" class="headerlink" title="3.更进一步: 控制并行数"></a>3.更进一步: 控制并行数</h3><h2 id="43-随机生成六位数的手机验证码-重复-不可重复"><a href="#43-随机生成六位数的手机验证码-重复-不可重复" class="headerlink" title="43.随机生成六位数的手机验证码(重复/不可重复)"></a>43.随机生成六位数的手机验证码(重复/不可重复)</h2><h2 id="44-如何去除字符串首尾空白字符"><a href="#44-如何去除字符串首尾空白字符" class="headerlink" title="44.如何去除字符串首尾空白字符"></a>44.如何去除字符串首尾空白字符</h2><h2 id="45-实现-intersection，取数组交集"><a href="#45-实现-intersection，取数组交集" class="headerlink" title="45.实现 intersection，取数组交集"></a>45.实现 intersection，取数组交集</h2><h2 id="46-实现一个-composeLeft-flow-从左向右-函数，进行函数合成"><a href="#46-实现一个-composeLeft-flow-从左向右-函数，进行函数合成" class="headerlink" title="46.实现一个 composeLeft/flow(从左向右) 函数，进行函数合成"></a>46.实现一个 composeLeft/flow(从左向右) 函数，进行函数合成</h2><h2 id="47-实现一个-render-template-函数，可以用以渲染模板"><a href="#47-实现一个-render-template-函数，可以用以渲染模板" class="headerlink" title="47.实现一个 render/template 函数，可以用以渲染模板"></a>47.实现一个 render/template 函数，可以用以渲染模板</h2><h2 id="48-给定一个数值，给出它在-IEEE754-的表示，如符号位、指数位与分数位"><a href="#48-给定一个数值，给出它在-IEEE754-的表示，如符号位、指数位与分数位" class="headerlink" title="48.给定一个数值，给出它在 IEEE754 的表示，如符号位、指数位与分数位"></a>48.给定一个数值，给出它在 IEEE754 的表示，如符号位、指数位与分数位</h2><h2 id="49-实现二进制与十进制的互相转化的两个函数"><a href="#49-实现二进制与十进制的互相转化的两个函数" class="headerlink" title="49.实现二进制与十进制的互相转化的两个函数"></a>49.实现二进制与十进制的互相转化的两个函数</h2><h2 id="50-求给定数组中-N-个数相加之和为-sum-所有可能集合"><a href="#50-求给定数组中-N-个数相加之和为-sum-所有可能集合" class="headerlink" title="50.求给定数组中 N 个数相加之和为 sum 所有可能集合"></a>50.求给定数组中 N 个数相加之和为 sum 所有可能集合</h2><h2 id="51-如何实现一个-sampleSize-函数，从数组中随机取-N-个元素"><a href="#51-如何实现一个-sampleSize-函数，从数组中随机取-N-个元素" class="headerlink" title="51.如何实现一个 sampleSize 函数，从数组中随机取 N 个元素"></a>51.如何实现一个 sampleSize 函数，从数组中随机取 N 个元素</h2><h2 id="52-实现一个函数-keyBy"><a href="#52-实现一个函数-keyBy" class="headerlink" title="52.实现一个函数 keyBy"></a>52.实现一个函数 keyBy</h2><h2 id="53-实现一个函数-groupBy"><a href="#53-实现一个函数-groupBy" class="headerlink" title="53.实现一个函数 groupBy"></a>53.实现一个函数 groupBy</h2><h2 id="54-求正序增长的正整数数组中，其和为-N-的两个数"><a href="#54-求正序增长的正整数数组中，其和为-N-的两个数" class="headerlink" title="54.求正序增长的正整数数组中，其和为 N 的两个数"></a>54.求正序增长的正整数数组中，其和为 N 的两个数</h2><h2 id="55-FizzBuzz，是否能被-3-或-5-整除"><a href="#55-FizzBuzz，是否能被-3-或-5-整除" class="headerlink" title="55.FizzBuzz，是否能被 3 或 5 整除"></a>55.FizzBuzz，是否能被 3 或 5 整除</h2><h2 id="56-实现一个函数-camelCase，对变量转化为驼峰命名"><a href="#56-实现一个函数-camelCase，对变量转化为驼峰命名" class="headerlink" title="56.实现一个函数 camelCase，对变量转化为驼峰命名"></a>56.实现一个函数 camelCase，对变量转化为驼峰命名</h2><h2 id="57-JS-中如何原生实现-instanceOf"><a href="#57-JS-中如何原生实现-instanceOf" class="headerlink" title="57.JS 中如何原生实现 instanceOf"></a>57.JS 中如何原生实现 instanceOf</h2><h2 id="58-如何根据-random5-随机生成-0-5-，生成一个函数-random7？"><a href="#58-如何根据-random5-随机生成-0-5-，生成一个函数-random7？" class="headerlink" title="58.如何根据 random5 随机生成 [0, 5]，生成一个函数 random7？"></a>58.如何根据 random5 随机生成 [0, 5]，生成一个函数 random7？</h2><h2 id="59-如何实现一个-ORM-类似的-find-链式调用"><a href="#59-如何实现一个-ORM-类似的-find-链式调用" class="headerlink" title="59.如何实现一个 ORM 类似的 find 链式调用"></a>59.如何实现一个 ORM 类似的 find 链式调用</h2><h2 id="60-实现函数-promisify，把回调函数改成-promise-形式"><a href="#60-实现函数-promisify，把回调函数改成-promise-形式" class="headerlink" title="60.实现函数 promisify，把回调函数改成 promise 形式"></a>60.实现函数 promisify，把回调函数改成 promise 形式</h2><h2 id="61-如何实现一个-omit-omitBy-函数"><a href="#61-如何实现一个-omit-omitBy-函数" class="headerlink" title="61.如何实现一个 omit/omitBy 函数"></a>61.如何实现一个 omit/omitBy 函数</h2><h1 id="简单正则-共2题"><a href="#简单正则-共2题" class="headerlink" title="简单正则 共2题"></a>简单正则 共2题</h1><h2 id="1-如何使用正则匹配一个汉字"><a href="#1-如何使用正则匹配一个汉字" class="headerlink" title="1.如何使用正则匹配一个汉字"></a>1.如何使用正则匹配一个汉字</h2><h2 id="2-实现一个-render-template-函数，可以用以渲染模板"><a href="#2-实现一个-render-template-函数，可以用以渲染模板" class="headerlink" title="2.实现一个 render/template 函数，可以用以渲染模板"></a>2.实现一个 render/template 函数，可以用以渲染模板</h2><h1 id="Typescript-共6题"><a href="#Typescript-共6题" class="headerlink" title="Typescript 共6题"></a>Typescript 共6题</h1><h2 id="1-在-Typescript-中如何实现类型标记-Pick-与-Omit"><a href="#1-在-Typescript-中如何实现类型标记-Pick-与-Omit" class="headerlink" title="1.在 Typescript 中如何实现类型标记 Pick 与 Omit"></a>1.在 Typescript 中如何实现类型标记 Pick 与 Omit</h2><h2 id="2-什么是协变与逆变"><a href="#2-什么是协变与逆变" class="headerlink" title="2.什么是协变与逆变"></a>2.什么是协变与逆变</h2><h2 id="3-在-ts-中如何实现-Partial"><a href="#3-在-ts-中如何实现-Partial" class="headerlink" title="3.在 ts 中如何实现 Partial"></a>3.在 ts 中如何实现 Partial</h2><h2 id="4-在-ts-中什么是-infer，并实现-Parameters-与-ReturnType"><a href="#4-在-ts-中什么是-infer，并实现-Parameters-与-ReturnType" class="headerlink" title="4.在 ts 中什么是 infer，并实现 Parameters 与 ReturnType"></a>4.在 ts 中什么是 infer，并实现 Parameters 与 ReturnType</h2><h2 id="5-typescript-中-interface-与-type-有何区别"><a href="#5-typescript-中-interface-与-type-有何区别" class="headerlink" title="5.typescript 中 interface 与 type 有何区别"></a>5.typescript 中 interface 与 type 有何区别</h2><h2 id="6-请简述-typescript-中的-infer"><a href="#6-请简述-typescript-中的-infer" class="headerlink" title="6.请简述 typescript 中的 infer"></a>6.请简述 typescript 中的 infer</h2></article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="http://example.com">晚夜微雨问海棠</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="http://example.com/posts/852f977b.html">http://example.com/posts/852f977b.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="http://example.com" target="_blank">晚夜微雨问海棠のBlog</a>！</span></div></div><div class="tag_share"><div class="post_share"><div class="social-share" data-image="https://s1.ax1x.com/2023/01/28/pSaldDe.jpg" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><div class="post-reward"><div class="reward-button"><i class="fas fa-qrcode"></i> 打赏</div><div class="reward-main"><ul class="reward-all"><li class="reward-item"><a href="https://s1.ax1x.com/2022/11/15/zE9P7d.jpg" target="_blank"><img class="post-qr-code-img" src= "" data-lazy-src="https://s1.ax1x.com/2022/11/15/zE9P7d.jpg" alt="微信"/></a><div class="post-qr-code-desc">微信</div></li><li class="reward-item"><a href="https://s1.ax1x.com/2022/11/15/zE9ung.jpg" target="_blank"><img class="post-qr-code-img" src= "" data-lazy-src="https://s1.ax1x.com/2022/11/15/zE9ung.jpg" alt="支付宝"/></a><div class="post-qr-code-desc">支付宝</div></li></ul></div></div><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/posts/f10f5b87.html" title="Chrome浏览器"><img class="cover" src= "" data-lazy-src="https://s1.ax1x.com/2022/11/13/zFR3xe.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-11-13</div><div class="title">Chrome浏览器</div></div></a></div><div><a href="/posts/4f47bf3c.html" title="JS小技巧"><img class="cover" src= "" data-lazy-src="https://s1.ax1x.com/2023/06/24/pCtlrL9.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2023-06-19</div><div class="title">JS小技巧</div></div></a></div><div><a href="/posts/f1f3f3e5.html" title="Git 的基本使用"><img class="cover" src= "" data-lazy-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fblog-file.uiaoin.com%2Fp%2F98f2c59a19d96e9f4a03257f0d348510.gif&refer=http%3A%2F%2Fblog-file.uiaoin.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664439668&t=bbbd0da3362e971917925cc3c9f77335" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-11-14</div><div class="title">Git 的基本使用</div></div></a></div><div><a href="/posts/fc49771e.html" title="vue3-将axios等方法绑定到原型上供全局使用"><img class="cover" src= "" data-lazy-src="https://s1.ax1x.com/2023/01/27/pSNzvXF.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2023-01-27</div><div class="title">vue3-将axios等方法绑定到原型上供全局使用</div></div></a></div><div><a href="/posts/5d3e0e97.html" title="Vue3+TS项目开发小技巧"><img class="cover" src= "" data-lazy-src="https://s1.ax1x.com/2023/06/24/pCtlcIx.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2023-06-14</div><div class="title">Vue3+TS项目开发小技巧</div></div></a></div><div><a href="/posts/d2b9e5fd.html" title="less-loader版本问题"><img class="cover" src= "" data-lazy-src="https://s1.ax1x.com/2023/01/27/pSUS49x.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2023-01-27</div><div class="title">less-loader版本问题</div></div></a></div></div></div><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div class="vcomment" id="vcomment"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content is-expand"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#html-%E5%85%B118%E9%A2%98"><span class="toc-number">1.</span> <span class="toc-text">html 共18题</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-%E7%BD%91%E7%AB%99%E5%BC%80%E5%8F%91%E4%B8%AD%EF%BC%8C%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E5%9B%BE%E7%89%87%E7%9A%84%E6%87%92%E5%8A%A0%E8%BD%BD"><span class="toc-number">1.1.</span> <span class="toc-text">1.网站开发中，如何实现图片的懒加载</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E6%96%B9%E6%A1%88%E4%B8%80-%E4%BD%8D%E7%BD%AE%E8%AE%A1%E7%AE%97-%E6%BB%9A%E5%8A%A8%E4%BA%8B%E4%BB%B6-Scroll-DataSet-API"><span class="toc-number">1.1.1.</span> <span class="toc-text">1.方案一: 位置计算 + 滚动事件 (Scroll) + DataSet API</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E6%96%B9%E6%A1%88%E4%BA%8C-getBoundingClientRect-API-Scroll-with-Throttle-DataSet-API"><span class="toc-number">1.1.2.</span> <span class="toc-text">2.方案二: getBoundingClientRect API + Scroll with Throttle + DataSet API</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E6%96%B9%E6%A1%88%E4%B8%89-IntersectionObserver-API-DataSet-API"><span class="toc-number">1.1.3.</span> <span class="toc-text">3.方案三: IntersectionObserver API + DataSet API</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-%E6%96%B9%E6%A1%88%E5%9B%9B-LazyLoading-%E5%B1%9E%E6%80%A7"><span class="toc-number">1.1.4.</span> <span class="toc-text">4.方案四: LazyLoading 属性</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%AD%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E5%89%AA%E5%88%87%E6%9D%BF%E5%A4%8D%E5%88%B6%E5%86%85%E5%AE%B9%E7%9A%84%E5%8A%9F%E8%83%BD"><span class="toc-number">1.2.</span> <span class="toc-text">2.浏览器中如何实现剪切板复制内容的功能</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E9%80%89%E4%B8%AD-Selection-API-Range-API"><span class="toc-number">1.2.1.</span> <span class="toc-text">1.选中: Selection API&#x2F;Range API</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E5%A4%8D%E5%88%B6-execCommand"><span class="toc-number">1.2.2.</span> <span class="toc-text">2.复制: execCommand</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-localhost-3000-%E4%B8%8E-localhost-5000-%E7%9A%84-cookie-%E4%BF%A1%E6%81%AF%E6%98%AF%E5%90%A6%E5%85%B1%E4%BA%AB"><span class="toc-number">1.3.</span> <span class="toc-text">3.localhost:3000 与 localhost:5000 的 cookie 信息是否共享</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-%E4%BB%80%E4%B9%88%E6%98%AF-CSRF-%E6%94%BB%E5%87%BB"><span class="toc-number">1.4.</span> <span class="toc-text">4.什么是 CSRF 攻击</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-%E5%9C%A8%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%AD%E5%A6%82%E4%BD%95%E7%9B%91%E5%90%AC%E5%89%AA%E5%88%87%E6%9D%BF%E4%B8%AD%E5%86%85%E5%AE%B9"><span class="toc-number">1.5.</span> <span class="toc-text">5.在浏览器中如何监听剪切板中内容</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-%E5%A6%82%E4%BD%95%E6%8A%8A-json-%E6%95%B0%E6%8D%AE%E8%BD%AC%E5%8C%96%E4%B8%BA-demo-json-%E5%B9%B6%E4%B8%8B%E8%BD%BD%E6%96%87%E4%BB%B6"><span class="toc-number">1.6.</span> <span class="toc-text">6.如何把 json 数据转化为 demo.json 并下载文件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#7-%E7%AE%80%E5%8D%95%E4%BB%8B%E7%BB%8D-requestIdleCallback-%E5%8F%8A%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF"><span class="toc-number">1.7.</span> <span class="toc-text">7.简单介绍 requestIdleCallback 及使用场景</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#8-%E5%A6%82%E4%BD%95%E8%AE%A1%E7%AE%97%E7%99%BD%E5%B1%8F%E6%97%B6%E9%97%B4%E5%92%8C%E9%A6%96%E5%B1%8F%E6%97%B6%E9%97%B4"><span class="toc-number">1.8.</span> <span class="toc-text">8.如何计算白屏时间和首屏时间</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#9-%E4%BB%80%E4%B9%88%E6%98%AF%E9%87%8D%E6%8E%92%E9%87%8D%E7%BB%98%EF%BC%8C%E5%A6%82%E4%BD%95%E5%87%8F%E5%B0%91%E9%87%8D%E6%8B%8D%E9%87%8D%E7%BB%98"><span class="toc-number">1.9.</span> <span class="toc-text">9.什么是重排重绘，如何减少重拍重绘</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#10-HTML-%E4%B8%AD%E7%9A%84-input-%E6%A0%87%E7%AD%BE%E6%9C%89%E5%93%AA%E4%BA%9B-type"><span class="toc-number">1.10.</span> <span class="toc-text">10.HTML 中的 input 标签有哪些 type</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#11-%E4%BB%80%E4%B9%88%E6%98%AF-Data-URL"><span class="toc-number">1.11.</span> <span class="toc-text">11.什么是 Data URL</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#12-%E4%BB%80%E4%B9%88%E6%98%AF-HTML-%E7%9A%84%E5%AE%9E%E4%BD%93%E7%BC%96%E7%A0%81-HTML-Entity-Encode"><span class="toc-number">1.12.</span> <span class="toc-text">12.什么是 HTML 的实体编码 (HTML Entity Encode)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#13-textarea-%E5%A6%82%E4%BD%95%E7%A6%81%E6%AD%A2%E6%8B%89%E4%BC%B8"><span class="toc-number">1.13.</span> <span class="toc-text">13.textarea 如何禁止拉伸</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#14-%E5%9C%A8-Canvas-%E4%B8%AD%E5%A6%82%E4%BD%95%E5%A4%84%E7%90%86%E8%B7%A8%E5%9F%9F%E7%9A%84%E5%9B%BE%E7%89%87"><span class="toc-number">1.14.</span> <span class="toc-text">14.在 Canvas 中如何处理跨域的图片</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#15-%E5%A6%82%E4%BD%95%E5%8F%96%E6%B6%88%E8%AF%B7%E6%B1%82%E7%9A%84%E5%8F%91%E9%80%81"><span class="toc-number">1.15.</span> <span class="toc-text">15.如何取消请求的发送</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-XHR-%E4%BD%BF%E7%94%A8-xhr-abort"><span class="toc-number">1.15.1.</span> <span class="toc-text">1.XHR 使用 xhr.abort()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-fetch-%E4%BD%BF%E7%94%A8-AbortController"><span class="toc-number">1.15.2.</span> <span class="toc-text">2.fetch 使用 AbortController</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#16-HTML-%E6%A0%87%E7%AD%BE%E6%9C%89%E5%93%AA%E4%BA%9B%E8%A1%8C%E5%86%85%E5%85%83%E7%B4%A0"><span class="toc-number">1.16.</span> <span class="toc-text">16.HTML 标签有哪些行内元素</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#17-HTML-%E4%B8%AD%E6%9C%89%E5%93%AA%E4%BA%9B%E8%AF%AD%E4%B9%89%E5%8C%96%E6%A0%87%E7%AD%BE"><span class="toc-number">1.17.</span> <span class="toc-text">17.HTML 中有哪些语义化标签</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#18-%E4%BB%80%E4%B9%88%E6%98%AF-URL-%E7%BC%96%E7%A0%81-URL-Encode"><span class="toc-number">1.18.</span> <span class="toc-text">18.什么是 URL 编码 (URL Encode)</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#CSS-%E5%85%B180%E9%A2%98"><span class="toc-number">2.</span> <span class="toc-text">CSS 共80题</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E5%85%83%E7%B4%A0%E7%9A%84%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD"><span class="toc-number">2.1.</span> <span class="toc-text">1.如何实现一个元素的水平垂直居中</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-css-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E5%B7%A6%E4%BE%A7%E5%9B%BA%E5%AE%9A-300px%EF%BC%8C%E5%8F%B3%E4%BE%A7%E8%87%AA%E9%80%82%E5%BA%94%E7%9A%84%E5%B8%83%E5%B1%80"><span class="toc-number">2.2.</span> <span class="toc-text">2.css 如何实现左侧固定 300px，右侧自适应的布局</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA-loading-%E5%8A%A8%E7%94%BB"><span class="toc-number">2.3.</span> <span class="toc-text">3.如何实现一个 loading 动画</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-svg-%E5%AE%9E%E7%8E%B0%E6%96%B9%E6%A1%88"><span class="toc-number">2.3.1.</span> <span class="toc-text">1.svg 实现方案</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8-css-%E5%86%99%E4%B8%80%E4%B8%AA%E9%AD%94%E6%96%B9"><span class="toc-number">2.4.</span> <span class="toc-text">4.如何使用 css 写一个魔方</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8-css-%E5%86%99%E4%B8%80%E4%B8%AA%E6%9C%89-3D-%E6%95%88%E6%9E%9C%E7%9A%84%E7%AB%8B%E6%96%B9%E4%BD%93"><span class="toc-number">2.5.</span> <span class="toc-text">5.如何使用 css 写一个有 3D 效果的立方体</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-%E6%9C%89%E6%B2%A1%E6%9C%89%E4%BD%BF%E7%94%A8%E8%BF%87-css-variable%EF%BC%8C%E5%AE%83%E8%A7%A3%E5%86%B3%E4%BA%86%E5%93%AA%E4%BA%9B%E9%97%AE%E9%A2%98"><span class="toc-number">2.6.</span> <span class="toc-text">6.有没有使用过 css variable，它解决了哪些问题</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#7-%E8%B0%88%E8%B0%88%E4%BD%A0%E5%AF%B9-styled-component-%E7%9A%84%E7%9C%8B%E6%B3%95"><span class="toc-number">2.7.</span> <span class="toc-text">7.谈谈你对 styled-component 的看法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#8-%E4%BD%BF%E7%94%A8-CSS-%E5%A6%82%E4%BD%95%E7%94%BB%E4%B8%80%E4%B8%AA%E4%B8%89%E8%A7%92%E5%BD%A2"><span class="toc-number">2.8.</span> <span class="toc-text">8.使用 CSS 如何画一个三角形</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#9-display-inline-%E7%9A%84%E5%85%83%E7%B4%A0%E8%AE%BE%E7%BD%AE-margin-%E5%92%8C-padding-%E4%BC%9A%E7%94%9F%E6%95%88%E5%90%97"><span class="toc-number">2.9.</span> <span class="toc-text">9.display: inline 的元素设置 margin 和 padding 会生效吗</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#10-html-%E7%9A%84%E9%BB%98%E8%AE%A4-display-%E5%B1%9E%E6%80%A7%E6%98%AF%E5%A4%9A%E5%B0%91"><span class="toc-number">2.10.</span> <span class="toc-text">10.html 的默认 display 属性是多少</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#11-%E5%93%8D%E5%BA%94%E5%BC%8F%E5%B8%83%E5%B1%80%E9%9C%80%E8%A6%81%E6%B3%A8%E6%84%8F%E5%93%AA%E4%B8%80%E4%BA%9B"><span class="toc-number">2.11.</span> <span class="toc-text">11.响应式布局需要注意哪一些</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#12-%E5%AF%B9%E4%B8%80%E4%B8%AA%E9%9D%9E%E5%AE%9A%E9%95%BF%E5%AE%BD%E7%9A%84%E5%9D%97%E7%8A%B6%E5%85%83%E7%B4%A0%E5%A6%82%E4%BD%95%E5%81%9A%E5%9E%82%E7%9B%B4%E6%B0%B4%E5%B9%B3%E5%B1%85%E4%B8%AD"><span class="toc-number">2.12.</span> <span class="toc-text">12.对一个非定长宽的块状元素如何做垂直水平居中</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#13-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E5%B7%A6%E5%8F%B3%E5%9B%BA%E5%AE%9A%EF%BC%8C%E4%B8%AD%E9%97%B4%E8%87%AA%E9%80%82%E5%BA%94%E5%B8%83%E5%B1%80"><span class="toc-number">2.13.</span> <span class="toc-text">13.如何实现左右固定，中间自适应布局</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#14-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E8%A1%A8%E6%A0%BC%E5%8D%95%E5%8F%8C%E8%A1%8C%E6%9D%A1%E7%BA%B9%E6%A0%B7%E5%BC%8F"><span class="toc-number">2.14.</span> <span class="toc-text">14.如何实现表格单双行条纹样式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#15-%E7%AE%80%E8%BF%B0%E4%B8%8B-css-specificity"><span class="toc-number">2.15.</span> <span class="toc-text">15.简述下 css specificity</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#16-%E2%80%99-%E2%80%99-%E4%B8%8E-%E2%80%98-%E2%80%99-%E9%80%89%E6%8B%A9%E5%99%A8%E6%9C%89%E4%BB%80%E4%B9%88%E4%B8%8D%E5%90%8C"><span class="toc-number">2.16.</span> <span class="toc-text">16.’+’ 与 ‘~’ 选择器有什么不同</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#17-%E6%9C%89%E5%93%AA%E4%BA%9B-css-%E5%B1%9E%E6%80%A7%E4%B8%8D%E8%83%BD%E5%B1%95%E7%A4%BA%E5%8A%A8%E7%94%BB%E6%95%88%E6%9E%9C"><span class="toc-number">2.17.</span> <span class="toc-text">17.有哪些 css 属性不能展示动画效果</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#18-css-%E5%8A%A8%E7%94%BB%E4%B8%8E-js-%E5%8A%A8%E7%94%BB%E5%93%AA%E4%B8%AA%E6%80%A7%E8%83%BD%E6%9B%B4%E5%A5%BD"><span class="toc-number">2.18.</span> <span class="toc-text">18.css 动画与 js 动画哪个性能更好</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#19-css-%E4%B8%AD%E5%B1%9E%E6%80%A7%E9%80%89%E6%8B%A9%E5%99%A8%E5%8F%8A%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8%E7%9A%84%E6%9D%83%E9%87%8D%E5%93%AA%E4%B8%AA%E9%AB%98"><span class="toc-number">2.19.</span> <span class="toc-text">19.css 中属性选择器及类选择器的权重哪个高</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#20-%E4%B8%BA%E4%BB%80%E4%B9%88%E4%BC%9A%E5%8F%91%E7%94%9F%E6%A0%B7%E5%BC%8F%E6%8A%96%E5%8A%A8"><span class="toc-number">2.20.</span> <span class="toc-text">20.为什么会发生样式抖动</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#21-position-sticky-%E5%A6%82%E4%BD%95%E5%B7%A5%E4%BD%9C%EF%BC%8C%E9%80%82%E7%94%A8%E4%BA%8E%E5%93%AA%E4%BA%9B%E5%9C%BA%E6%99%AF"><span class="toc-number">2.21.</span> <span class="toc-text">21.position: sticky 如何工作，适用于哪些场景</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#22-%E4%BB%80%E4%B9%88%E6%98%AF%E5%B1%82%E5%8F%A0%E4%B8%8A%E4%B8%8B%E6%96%87-stacking-contect-%EF%BC%8C%E8%B0%88%E8%B0%88%E5%AF%B9%E5%AE%83%E7%9A%84%E7%90%86%E8%A7%A3"><span class="toc-number">2.22.</span> <span class="toc-text">22.什么是层叠上下文 (stacking contect)，谈谈对它的理解</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#23-%E4%BD%A0%E7%94%A8-css-%E5%AE%9E%E7%8E%B0%E8%BF%87%E4%BB%80%E4%B9%88%E4%B8%8D%E9%94%99%E7%9A%84%E6%95%88%E6%9E%9C"><span class="toc-number">2.23.</span> <span class="toc-text">23.你用 css 实现过什么不错的效果</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#24-%E4%BD%A0%E5%81%9A%E5%89%8D%E7%AB%AF%E6%9C%89%E5%A4%9A%E5%B0%91%E6%97%B6%E9%97%B4%E8%8A%B1%E5%9C%A8%E5%86%99-css-%E4%B8%8A"><span class="toc-number">2.24.</span> <span class="toc-text">24.你做前端有多少时间花在写 css 上</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#25-%E4%BC%AA%E7%B1%BB%E4%B8%8E%E4%BC%AA%E5%85%83%E7%B4%A0%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB"><span class="toc-number">2.25.</span> <span class="toc-text">25.伪类与伪元素有什么区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#26-css-%E5%A6%82%E4%BD%95%E5%8C%B9%E9%85%8D%E5%89%8D-N-%E4%B8%AA%E5%AD%90%E5%85%83%E7%B4%A0%E5%8F%8A%E6%9C%80%E5%90%8E-N-%E4%B8%AA%E5%AD%90%E5%85%83%E7%B4%A0"><span class="toc-number">2.26.</span> <span class="toc-text">26.css 如何匹配前 N 个子元素及最后 N 个子元素</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#27-%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8-CSS-%E5%AE%9E%E7%8E%B0%E7%BD%91%E7%AB%99%E7%9A%84%E6%9A%97%E9%BB%91%E6%A8%A1%E5%BC%8F-Dark-Mode"><span class="toc-number">2.27.</span> <span class="toc-text">27.如何使用 CSS 实现网站的暗黑模式 (Dark Mode)</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-Reference"><span class="toc-number">2.27.1.</span> <span class="toc-text">1.Reference</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#28-%E4%BB%8B%E7%BB%8D-CSS-%E9%9A%90%E8%97%8F%E9%A1%B5%E9%9D%A2%E4%B8%AD%E6%9F%90%E4%B8%AA%E5%85%83%E7%B4%A0%E7%9A%84%E5%87%A0%E7%A7%8D%E6%96%B9%E6%B3%95"><span class="toc-number">2.28.</span> <span class="toc-text">28.介绍 CSS 隐藏页面中某个元素的几种方法</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-display-none"><span class="toc-number">2.28.1.</span> <span class="toc-text">1.display: none</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-opacity-0"><span class="toc-number">2.28.2.</span> <span class="toc-text">2.opacity: 0</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-visibility-hidden"><span class="toc-number">2.28.3.</span> <span class="toc-text">3.visibility: hidden</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-content-visibility"><span class="toc-number">2.28.4.</span> <span class="toc-text">4.content-visibility</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%E4%BA%8E%E5%BD%93%E5%89%8D%E9%A1%B5%E9%9D%A2%E7%9A%84%E4%B8%8D%E5%8F%AF%E8%A7%81%E4%BD%8D%E7%BD%AE"><span class="toc-number">2.28.5.</span> <span class="toc-text">5.绝对定位于当前页面的不可见位置</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#6-%E5%AD%97%E4%BD%93%E5%A4%A7%E5%B0%8F%E8%AE%BE%E7%BD%AE%E4%B8%BA-0"><span class="toc-number">2.28.6.</span> <span class="toc-text">6.字体大小设置为 0</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#29-css-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E5%93%8D%E5%BA%94%E5%BC%8F%E5%B8%83%E5%B1%80%E5%A4%A7%E5%B1%8F%E5%B9%95%E4%B8%89%E7%AD%89%E5%88%86%E3%80%81%E4%B8%AD%E5%B1%8F%E5%B9%95%E4%BA%8C%E7%AD%89%E5%88%86%E3%80%81%E5%B0%8F%E5%B1%8F%E5%B9%95%E4%B8%80%E7%AD%89%E5%88%86"><span class="toc-number">2.29.</span> <span class="toc-text">29.css 如何实现响应式布局大屏幕三等分、中屏幕二等分、小屏幕一等分</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%BB%88%E6%9E%81%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88"><span class="toc-number">2.29.1.</span> <span class="toc-text">终极解决方案</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%BB%88%E6%9E%81%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%882"><span class="toc-number">2.29.2.</span> <span class="toc-text">终极解决方案2</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#30-%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E4%B8%AD%E5%A6%82%E4%BD%95%E8%BF%9B%E8%A1%8C%E5%A4%9A%E4%B8%BB%E9%A2%98%E9%85%8D%E7%BD%AE"><span class="toc-number">2.30.</span> <span class="toc-text">30.前端开发中如何进行多主题配置</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#31-%E5%A6%82%E4%BD%95%E8%87%AA%E5%AE%9A%E4%B9%89%E6%BB%9A%E5%8A%A8%E6%9D%A1%E7%9A%84%E6%A0%B7%E5%BC%8F"><span class="toc-number">2.31.</span> <span class="toc-text">31.如何自定义滚动条的样式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#32-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E5%AE%B9%E5%99%A8%E4%B8%AD%E5%AD%90%E5%85%83%E7%B4%A0%E4%B8%89%E4%B8%AA%E4%B8%89%E5%88%97%E5%B8%83%E5%B1%80%EF%BC%8C%E5%AD%90%E5%85%83%E7%B4%A0%E4%B8%A4%E4%B8%AA%E5%88%99%E4%B8%A4%E5%88%97%E5%B8%83%E5%B1%80"><span class="toc-number">2.32.</span> <span class="toc-text">32.如何实现容器中子元素三个三列布局，子元素两个则两列布局</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#33-%E7%BD%91%E7%AB%99%E8%AE%BE%E7%BD%AE%E5%AD%97%E4%BD%93%E6%97%B6%EF%BC%8C%E5%A6%82%E4%BD%95%E8%AE%BE%E7%BD%AE%E4%BC%98%E5%85%88%E4%BD%BF%E7%94%A8%E7%B3%BB%E7%BB%9F%E9%BB%98%E8%AE%A4%E5%AD%97%E4%BD%93"><span class="toc-number">2.33.</span> <span class="toc-text">33.网站设置字体时，如何设置优先使用系统默认字体</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#34-%E5%86%99-CSS-%E6%97%B6%E5%A6%82%E4%BD%95%E9%81%BF%E5%85%8D%E5%91%BD%E5%90%8D%E6%A0%B7%E5%BC%8F%E5%86%B2%E7%AA%81"><span class="toc-number">2.34.</span> <span class="toc-text">34.写 CSS 时如何避免命名样式冲突</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-BEM-%E5%BC%8F-home-page-home-page-btn"><span class="toc-number">2.34.1.</span> <span class="toc-text">1.BEM 式: .home-page .home-page-btn</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-CSS-Scoped"><span class="toc-number">2.34.2.</span> <span class="toc-text">2.CSS Scoped</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-CSS-Module"><span class="toc-number">2.34.3.</span> <span class="toc-text">3.CSS Module</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#35-CSS-%E5%A6%82%E4%BD%95%E8%AE%BE%E7%BD%AE%E6%96%B9%E6%A0%BC%E8%83%8C%E6%99%AF"><span class="toc-number">2.35.</span> <span class="toc-text">35.CSS 如何设置方格背景</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#36-%E5%A6%82%E4%BD%95%E6%9B%B4%E5%A5%BD%E5%9C%B0%E7%BB%99%E5%85%83%E7%B4%A0%E8%AE%BE%E7%BD%AE-z-index"><span class="toc-number">2.36.</span> <span class="toc-text">36.如何更好地给元素设置 z-index</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#37-%E7%94%BB%E4%B8%80%E4%B8%AA-100x100-%E7%9A%84%E6%96%B9%E6%A1%86%EF%BC%8C%E5%85%B6%E4%B8%AD%E6%96%87%E5%AD%97%E5%8F%AF%E4%BB%A5%E6%AD%A3%E5%B8%B8%E6%8D%A2%E8%A1%8C%EF%BC%8C%E6%96%87%E5%AD%97%E8%BF%87%E5%A4%9A%E8%B6%85%E8%BF%87%E6%96%B9%E6%A1%86%E6%98%BE%E7%A4%BA%E6%BB%9A%E5%8A%A8%E6%9D%A1"><span class="toc-number">2.37.</span> <span class="toc-text">37.画一个 100x100 的方框，其中文字可以正常换行，文字过多超过方框显示滚动条</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#38-Grid-%E5%B8%83%E5%B1%80%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E7%B1%BB%E4%BC%BC-flex-row-reverse"><span class="toc-number">2.38.</span> <span class="toc-text">38.Grid 布局如何实现类似 flex: row-reverse</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#39-HTML-%E6%A0%87%E7%AD%BE%E6%9C%89%E5%93%AA%E4%BA%9B%E8%A1%8C%E5%86%85%E5%85%83%E7%B4%A0"><span class="toc-number">2.39.</span> <span class="toc-text">39.HTML 标签有哪些行内元素</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#40-CSS-%E5%A6%82%E4%BD%95%E8%AE%BE%E7%BD%AE%E4%B8%80%E8%A1%8C%E8%B6%85%E5%87%BA%E6%98%BE%E7%A4%BA%E7%9C%81%E7%95%A5%E5%8F%B7"><span class="toc-number">2.40.</span> <span class="toc-text">40.CSS 如何设置一行超出显示省略号</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#41-CSS-%E5%A6%82%E4%BD%95%E8%AE%BE%E7%BD%AE%E5%A4%9A%E8%A1%8C%E8%B6%85%E5%87%BA%E6%98%BE%E7%A4%BA%E7%9C%81%E7%95%A5%E5%8F%B7"><span class="toc-number">2.41.</span> <span class="toc-text">41.CSS 如何设置多行超出显示省略号</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#42-flex-%E5%B8%83%E5%B1%80%E4%B8%AD-order-%E6%9C%89%E4%BD%95%E4%BD%9C%E7%94%A8"><span class="toc-number">2.42.</span> <span class="toc-text">42.flex 布局中 order 有何作用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#43-flex-%E5%B8%83%E5%B1%80%E4%B8%AD-align-content-%E4%B8%8E-align-items-%E6%9C%89%E4%BD%95%E5%8C%BA%E5%88%AB"><span class="toc-number">2.43.</span> <span class="toc-text">43.flex 布局中 align-content 与 align-items 有何区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#44-%E5%AD%90%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%EF%BC%8C%E5%B9%B6%E4%B8%94%E8%AF%A5%E6%AD%A3%E6%96%B9%E5%BD%A2%E7%9A%84%E9%95%BF%E5%BA%A6-%E5%AE%BD%E5%BA%A6%E4%B8%BA%E7%88%B6%E5%AE%B9%E5%99%A8%E5%AE%BD%E5%BA%A6-width-%E4%B8%80%E5%8D%8A%E7%9A%84%E6%AD%A3%E6%96%B9%E5%BD%A2"><span class="toc-number">2.44.</span> <span class="toc-text">44.子元素垂直居中，并且该正方形的长度&#x2F;宽度为父容器宽度(width)一半的正方形</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#45-%E7%AE%80%E8%BF%B0-css-%E4%B8%AD-position-%E7%9A%84%E5%80%BC"><span class="toc-number">2.45.</span> <span class="toc-text">45.简述 css 中 position 的值</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#46-%E4%BB%80%E4%B9%88%E6%98%AF-BFC"><span class="toc-number">2.46.</span> <span class="toc-text">46.什么是 BFC</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#47-CSS-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E5%9B%BA%E5%AE%9A%E9%95%BF%E5%AE%BD%E6%AF%94%E7%9A%84%E5%85%83%E7%B4%A0"><span class="toc-number">2.47.</span> <span class="toc-text">47.CSS 如何实现固定长宽比的元素</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#48-rem%E3%80%81em%E3%80%81vw%E3%80%81vh-%E7%9A%84%E5%80%BC%E5%90%84%E6%98%AF%E4%BB%80%E4%B9%88%E6%84%8F%E6%80%9D"><span class="toc-number">2.48.</span> <span class="toc-text">48.rem、em、vw、vh 的值各是什么意思</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#49-normalize-css-%E4%B8%8E-reset-css-%E5%8F%88%E4%BD%95%E5%8C%BA%E5%88%AB"><span class="toc-number">2.49.</span> <span class="toc-text">49.normalize.css 与 reset.css 又何区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#50-line-height-%E7%9A%84%E5%80%BC%E5%88%86%E5%88%AB%E5%8F%96-2-2em-200-%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB"><span class="toc-number">2.50.</span> <span class="toc-text">50.line-height 的值分别取 [2, 2em, 200%] 有什么区别?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#51-%E6%9F%90%E5%85%83%E7%B4%A0%E7%9A%84-fontSize-2rem-lineHeight-1-5em-%E6%AD%A4%E6%97%B6-lineHeight-%E4%B8%BA%E5%A4%9A%E5%B0%91%E5%83%8F%E7%B4%A0"><span class="toc-number">2.51.</span> <span class="toc-text">51.某元素的 fontSize: 2rem; lineHeight: 1.5em; 此时 lineHeight 为多少像素</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#52-Grid-%E5%B8%83%E5%B1%80%E7%9A%84%E4%BC%98%E5%8A%BF%E5%9C%A8%E5%93%AA%E9%87%8C"><span class="toc-number">2.52.</span> <span class="toc-text">52.Grid 布局的优势在哪里</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#53-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E4%B8%89%E5%88%97%E5%9D%87%E5%88%86%E5%B8%83%E5%B1%80"><span class="toc-number">2.53.</span> <span class="toc-text">53.如何实现三列均分布局</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E4%BD%BF%E7%94%A8-Flex"><span class="toc-number">2.53.1.</span> <span class="toc-text">1.使用 Flex</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E4%BD%BF%E7%94%A8-Grid"><span class="toc-number">2.53.2.</span> <span class="toc-text">2.使用 Grid</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#54-%E4%BB%80%E4%B9%88%E6%98%AF%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2%EF%BC%8CJS-%E5%8F%AF%E4%BB%A5%E7%9B%91%E5%90%AC%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2%E5%90%97"><span class="toc-number">2.54.</span> <span class="toc-text">54.什么是媒体查询，JS 可以监听媒体查询吗</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#55-z-index-999-%E5%85%83%E7%B4%A0%E4%B8%80%E5%AE%9A%E4%BC%9A%E7%BD%AE%E4%BA%8E-z-index-0-%E5%85%83%E7%B4%A0%E4%B9%8B%E4%B8%8A%E5%90%97"><span class="toc-number">2.55.</span> <span class="toc-text">55.z-index: 999 元素一定会置于 z-index: 0 元素之上吗</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#56-%E8%AF%B7%E7%AE%80%E4%BB%8B-CSS-%E7%9A%84%E7%9B%92%E6%A8%A1%E5%9E%8B"><span class="toc-number">2.56.</span> <span class="toc-text">56.请简介 CSS 的盒模型</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#57-CSS-%E6%9C%89%E5%93%AA%E4%BA%9B%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">2.57.</span> <span class="toc-text">57.CSS 有哪些选择器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#58-CSS-%E6%9C%89%E5%93%AA%E4%BA%9B%E4%BC%AA%E7%B1%BB%E4%B8%8E%E4%BC%AA%E5%85%83%E7%B4%A0%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">2.58.</span> <span class="toc-text">58.CSS 有哪些伪类与伪元素选择器</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E4%BC%AA%E5%85%83%E7%B4%A0"><span class="toc-number">2.58.1.</span> <span class="toc-text">1.伪元素</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E4%BC%AA%E7%B1%BB"><span class="toc-number">2.58.2.</span> <span class="toc-text">2.伪类</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#59-css-%E5%8A%A0%E8%BD%BD%E4%BC%9A%E9%98%BB%E5%A1%9E-DOM-%E6%A0%91%E7%9A%84%E8%A7%A3%E6%9E%90%E5%92%8C%E6%B8%B2%E6%9F%93%E5%90%97"><span class="toc-number">2.59.</span> <span class="toc-text">59.css 加载会阻塞 DOM 树的解析和渲染吗</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#60-%E5%9C%A8-CSS-%E4%B8%AD%EF%BC%8C%E4%BD%BF%E7%94%A8-rem-%E4%BD%9C%E4%B8%BA%E5%8D%95%E4%BD%8D%E6%9C%89%E4%BD%95%E7%BC%BA%E7%82%B9"><span class="toc-number">2.60.</span> <span class="toc-text">60.在 CSS 中，使用 rem 作为单位有何缺点</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#61-Flex-%E5%B8%83%E5%B1%80%E4%B8%AD%E7%9A%84-flex-basis-%E4%B8%8E-width-%E6%9C%89%E4%BD%95%E5%8C%BA%E5%88%AB"><span class="toc-number">2.61.</span> <span class="toc-text">61.Flex 布局中的 flex-basis 与 width 有何区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#62-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B%E7%9A%84%E7%90%86%E8%A7%A3-opens-new-window"><span class="toc-number">2.62.</span> <span class="toc-text">62.面试官：说说你对盒子模型的理解?(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#63-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9Acss%E9%80%89%E6%8B%A9%E5%99%A8%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F%E4%BC%98%E5%85%88%E7%BA%A7%EF%BC%9F%E5%93%AA%E4%BA%9B%E5%B1%9E%E6%80%A7%E5%8F%AF%E4%BB%A5%E7%BB%A7%E6%89%BF%EF%BC%9F-opens-new-window"><span class="toc-number">2.63.</span> <span class="toc-text">63.面试官：css选择器有哪些？优先级？哪些属性可以继承？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#64-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4em-px-rem-vh-vw%E5%8C%BA%E5%88%AB-opens-new-window"><span class="toc-number">2.64.</span> <span class="toc-text">64.面试官：说说em&#x2F;px&#x2F;rem&#x2F;vh&#x2F;vw区别?(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#65-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E8%AE%BE%E5%A4%87%E5%83%8F%E7%B4%A0%E3%80%81css%E5%83%8F%E7%B4%A0%E3%80%81%E8%AE%BE%E5%A4%87%E7%8B%AC%E7%AB%8B%E5%83%8F%E7%B4%A0%E3%80%81dpr%E3%80%81ppi-%E4%B9%8B%E9%97%B4%E7%9A%84%E5%8C%BA%E5%88%AB%EF%BC%9F-opens-new-window"><span class="toc-number">2.65.</span> <span class="toc-text">65.面试官：说说设备像素、css像素、设备独立像素、dpr、ppi 之间的区别？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#66-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9Acss%E4%B8%AD%EF%BC%8C%E6%9C%89%E5%93%AA%E4%BA%9B%E6%96%B9%E5%BC%8F%E5%8F%AF%E4%BB%A5%E9%9A%90%E8%97%8F%E9%A1%B5%E9%9D%A2%E5%85%83%E7%B4%A0%EF%BC%9F%E5%8C%BA%E5%88%AB-opens-new-window"><span class="toc-number">2.66.</span> <span class="toc-text">66.面试官：css中，有哪些方式可以隐藏页面元素？区别?(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#67-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%B0%88%E8%B0%88%E4%BD%A0%E5%AF%B9BFC%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F-opens-new-window"><span class="toc-number">2.67.</span> <span class="toc-text">67.面试官：谈谈你对BFC的理解？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#68-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E5%85%83%E7%B4%A0%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E7%9A%84%E6%96%B9%E6%B3%95%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F%E5%A6%82%E6%9E%9C%E5%85%83%E7%B4%A0%E4%B8%8D%E5%AE%9A%E5%AE%BD%E9%AB%98%E5%91%A2%EF%BC%9F-opens-new-window"><span class="toc-number">2.68.</span> <span class="toc-text">68.面试官：元素水平垂直居中的方法有哪些？如果元素不定宽高呢？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#69-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E4%B8%A4%E6%A0%8F%E5%B8%83%E5%B1%80%EF%BC%8C%E5%8F%B3%E4%BE%A7%E8%87%AA%E9%80%82%E5%BA%94%EF%BC%9F%E4%B8%89%E6%A0%8F%E5%B8%83%E5%B1%80%E4%B8%AD%E9%97%B4%E8%87%AA%E9%80%82%E5%BA%94%E5%91%A2%EF%BC%9F-opens-new-window"><span class="toc-number">2.69.</span> <span class="toc-text">69.面试官：如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#70-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4flexbox%EF%BC%88%E5%BC%B9%E6%80%A7%E7%9B%92%E5%B8%83%E5%B1%80%E6%A8%A1%E5%9E%8B%EF%BC%89-%E4%BB%A5%E5%8F%8A%E9%80%82%E7%94%A8%E5%9C%BA%E6%99%AF%EF%BC%9F-opens-new-window"><span class="toc-number">2.70.</span> <span class="toc-text">70.面试官：说说flexbox（弹性盒布局模型）,以及适用场景？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#71-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E4%BB%8B%E7%BB%8D%E4%B8%80%E4%B8%8Bgrid%E7%BD%91%E6%A0%BC%E5%B8%83%E5%B1%80-opens-new-window"><span class="toc-number">2.71.</span> <span class="toc-text">71.面试官：介绍一下grid网格布局(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#72-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9ACSS3%E6%96%B0%E5%A2%9E%E4%BA%86%E5%93%AA%E4%BA%9B%E6%96%B0%E7%89%B9%E6%80%A7%EF%BC%9F-opens-new-window"><span class="toc-number">2.72.</span> <span class="toc-text">72.面试官：CSS3新增了哪些新特性？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#73-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9Acss3%E5%8A%A8%E7%94%BB%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F-opens-new-window"><span class="toc-number">2.73.</span> <span class="toc-text">73.面试官：css3动画有哪些？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#74-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E6%80%8E%E4%B9%88%E7%90%86%E8%A7%A3%E5%9B%9E%E6%B5%81%E8%B7%9F%E9%87%8D%E7%BB%98%EF%BC%9F%E4%BB%80%E4%B9%88%E5%9C%BA%E6%99%AF%E4%B8%8B%E4%BC%9A%E8%A7%A6%E5%8F%91%EF%BC%9F-opens-new-window"><span class="toc-number">2.74.</span> <span class="toc-text">74.面试官：怎么理解回流跟重绘？什么场景下会触发？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#75-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E4%BB%80%E4%B9%88%E6%98%AF%E5%93%8D%E5%BA%94%E5%BC%8F%E8%AE%BE%E8%AE%A1%EF%BC%9F%E5%93%8D%E5%BA%94%E5%BC%8F%E8%AE%BE%E8%AE%A1%E7%9A%84%E5%9F%BA%E6%9C%AC%E5%8E%9F%E7%90%86%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F%E5%A6%82%E4%BD%95%E5%81%9A%EF%BC%9F-opens-new-window"><span class="toc-number">2.75.</span> <span class="toc-text">75.面试官：什么是响应式设计？响应式设计的基本原理是什么？如何做？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#76-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E5%A6%82%E6%9E%9C%E8%A6%81%E5%81%9A%E4%BC%98%E5%8C%96%EF%BC%8CCSS%E6%8F%90%E9%AB%98%E6%80%A7%E8%83%BD%E7%9A%84%E6%96%B9%E6%B3%95%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F-opens-new-window"><span class="toc-number">2.76.</span> <span class="toc-text">76.面试官：如果要做优化，CSS提高性能的方法有哪些？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#77-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E5%8D%95%E8%A1%8C%EF%BC%8F%E5%A4%9A%E8%A1%8C%E6%96%87%E6%9C%AC%E6%BA%A2%E5%87%BA%E7%9A%84%E7%9C%81%E7%95%A5%E6%A0%B7%E5%BC%8F%EF%BC%9F-opens-new-window"><span class="toc-number">2.77.</span> <span class="toc-text">77.面试官：如何实现单行／多行文本溢出的省略样式？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#78-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8css%E5%AE%8C%E6%88%90%E8%A7%86%E5%B7%AE%E6%BB%9A%E5%8A%A8%E6%95%88%E6%9E%9C-opens-new-window"><span class="toc-number">2.78.</span> <span class="toc-text">78.面试官：如何使用css完成视差滚动效果?(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#79-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9ACSS%E5%A6%82%E4%BD%95%E7%94%BB%E4%B8%80%E4%B8%AA%E4%B8%89%E8%A7%92%E5%BD%A2%EF%BC%9F%E5%8E%9F%E7%90%86%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F-opens-new-window"><span class="toc-number">2.79.</span> <span class="toc-text">79.面试官：CSS如何画一个三角形？原理是什么？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#80-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AE%A9Chrome%E6%94%AF%E6%8C%81%E5%B0%8F%E4%BA%8E12px-%E7%9A%84%E6%96%87%E5%AD%97%E6%96%B9%E5%BC%8F%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F%E5%8C%BA%E5%88%AB%EF%BC%9F-opens-new-window"><span class="toc-number">2.80.</span> <span class="toc-text">80.面试官：让Chrome支持小于12px 的文字方式有哪些？区别？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#81-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E5%AF%B9Css%E9%A2%84%E7%BC%96%E8%AF%AD%E8%A8%80%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E6%9C%89%E5%93%AA%E4%BA%9B%E5%8C%BA%E5%88%AB-opens-new-window"><span class="toc-number">2.81.</span> <span class="toc-text">81.面试官：说说对Css预编语言的理解？有哪些区别?(opens new window)</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%B5%8F%E8%A7%88%E5%99%A8-DOM-API-%E5%85%B145%E9%A2%98"><span class="toc-number">3.</span> <span class="toc-text">浏览器 DOM API 共45题</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-%E5%A6%82%E4%BD%95%E8%AE%BE%E7%BD%AE%E4%B8%80%E4%B8%AA-cookie"><span class="toc-number">3.1.</span> <span class="toc-text">1.如何设置一个 cookie</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-%E5%A6%82%E4%BD%95%E5%88%A0%E9%99%A4%E4%B8%80%E4%B8%AA-cookie"><span class="toc-number">3.2.</span> <span class="toc-text">2.如何删除一个 cookie</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-%E5%A6%82%E4%BD%95%E5%88%A4%E6%96%AD%E5%BD%93%E5%89%8D%E7%8E%AF%E5%A2%83%E6%98%AF%E7%A7%BB%E5%8A%A8%E7%AB%AF%E8%BF%98%E6%98%AF-PC-%E7%AB%AF"><span class="toc-number">3.3.</span> <span class="toc-text">3.如何判断当前环境是移动端还是 PC 端</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-input-%E4%B8%AD%E7%9B%91%E5%90%AC%E5%80%BC%E7%9A%84%E5%8F%98%E5%8C%96%E6%98%AF%E5%9C%A8%E7%9B%91%E5%90%AC%E4%BB%80%E4%B9%88%E4%BA%8B%E4%BB%B6"><span class="toc-number">3.4.</span> <span class="toc-text">4.input 中监听值的变化是在监听什么事件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-%E4%BB%80%E4%B9%88%E6%98%AF%E8%B7%A8%E5%9F%9F%EF%BC%8C%E5%A6%82%E4%BD%95%E8%A7%A3%E5%86%B3%E8%B7%A8%E5%9F%9F%E9%97%AE%E9%A2%98"><span class="toc-number">3.5.</span> <span class="toc-text">5.什么是跨域，如何解决跨域问题</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E8%B7%A8%E5%9F%9F"><span class="toc-number">3.5.1.</span> <span class="toc-text">1.跨域</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E5%A6%82%E4%BD%95%E8%A7%A3%E5%86%B3%E8%B7%A8%E5%9F%9F"><span class="toc-number">3.5.2.</span> <span class="toc-text">2.如何解决跨域</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-CSP-%E6%98%AF%E5%B9%B2%E4%BB%80%E4%B9%88%E7%94%A8%E7%9A%84%E4%BA%86"><span class="toc-number">3.6.</span> <span class="toc-text">6.CSP 是干什么用的了</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%9B%B8%E5%85%B3%E9%93%BE%E6%8E%A5"><span class="toc-number">3.6.1.</span> <span class="toc-text">相关链接</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#7-prefetch-%E4%B8%8E-preload-%E7%9A%84%E5%8C%BA%E5%88%AB%E6%98%AF%E4%BB%80%E4%B9%88"><span class="toc-number">3.7.</span> <span class="toc-text">7.prefetch 与 preload 的区别是什么</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#8-fetch-%E4%B8%AD-credentials-%E6%8C%87%E4%BB%80%E4%B9%88%E6%84%8F%E6%80%9D%EF%BC%8C%E5%8F%AF%E4%BB%A5%E5%8F%96%E4%BB%80%E4%B9%88%E5%80%BC"><span class="toc-number">3.8.</span> <span class="toc-text">8.fetch 中 credentials 指什么意思，可以取什么值</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#9-%E5%BD%93-cookie-%E6%B2%A1%E6%9C%89%E8%AE%BE%E7%BD%AE-maxage-%E6%97%B6%EF%BC%8Ccookie-%E4%BC%9A%E5%AD%98%E5%9C%A8%E5%A4%9A%E4%B9%85"><span class="toc-number">3.9.</span> <span class="toc-text">9.当 cookie 没有设置 maxage 时，cookie 会存在多久</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#10-%E5%9C%A8%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%AD%E5%A6%82%E4%BD%95%E7%9B%91%E5%90%AC%E5%89%AA%E5%88%87%E6%9D%BF%E4%B8%AD%E5%86%85%E5%AE%B9"><span class="toc-number">3.10.</span> <span class="toc-text">10.在浏览器中如何监听剪切板中内容</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#11-js-%E5%8A%A8%E7%94%BB%E5%92%8C-css-%E5%8A%A8%E7%94%BB%E9%82%A3%E4%B8%AA%E6%80%A7%E8%83%BD%E6%AF%94%E8%BE%83%E5%A5%BD"><span class="toc-number">3.11.</span> <span class="toc-text">11.js 动画和 css 动画那个性能比较好</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#12-%E7%AE%80%E5%8D%95%E4%BB%8B%E7%BB%8D-requestIdleCallback-%E5%8F%8A%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF"><span class="toc-number">3.12.</span> <span class="toc-text">12.简单介绍 requestIdleCallback 及使用场景</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#13-%E5%A6%82%E4%BD%95%E6%89%BE%E5%88%B0%E5%BD%93%E5%89%8D%E9%A1%B5%E9%9D%A2%E5%87%BA%E7%8E%B0%E6%AC%A1%E6%95%B0%E6%9C%80%E5%A4%9A%E7%9A%84-HTML-%E6%A0%87%E7%AD%BE"><span class="toc-number">3.13.</span> <span class="toc-text">13.如何找到当前页面出现次数最多的 HTML 标签</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#14-%E4%BB%80%E4%B9%88%E6%98%AF%E5%B1%82%E5%8F%A0%E4%B8%8A%E4%B8%8B%E6%96%87-stacking-context"><span class="toc-number">3.14.</span> <span class="toc-text">14.什么是层叠上下文 (stacking context)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#15-%E5%A6%82%E4%BD%95%E6%8A%8A-DOM-%E8%BD%AC%E5%8C%96%E4%B8%BA%E5%9B%BE%E7%89%87"><span class="toc-number">3.15.</span> <span class="toc-text">15.如何把 DOM 转化为图片</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#16-%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84%E5%89%AA%E5%88%87%E6%9D%BF%E4%B8%AD%E5%A6%82%E4%BD%95%E7%9B%91%E5%90%AC%E5%A4%8D%E5%88%B6%E4%BA%8B%E4%BB%B6"><span class="toc-number">3.16.</span> <span class="toc-text">16.浏览器的剪切板中如何监听复制事件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#17-JSONP-%E7%9A%84%E5%8E%9F%E7%90%86%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%8C%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0"><span class="toc-number">3.17.</span> <span class="toc-text">17.JSONP 的原理是什么，如何实现</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E4%B8%80%E4%B8%AA%E6%AD%A3%E5%B8%B8%E7%9A%84%E8%AF%B7%E6%B1%82-JSON"><span class="toc-number">3.17.1.</span> <span class="toc-text">1.一个正常的请求: JSON</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E4%B8%80%E4%B8%AA-JSONP-%E8%AF%B7%E6%B1%82"><span class="toc-number">3.17.2.</span> <span class="toc-text">2.一个 JSONP 请求</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AB%AF%E4%BB%A3%E7%A0%81"><span class="toc-number">3.17.3.</span> <span class="toc-text">3.服务器端代码</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-%E5%AE%8C%E6%95%B4%E4%BB%A3%E7%A0%81%E9%99%84%E5%BD%95"><span class="toc-number">3.17.4.</span> <span class="toc-text">4.完整代码附录</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#18-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E9%A1%B5%E9%9D%A2%E6%96%87%E6%9C%AC%E4%B8%8D%E5%8F%AF%E5%A4%8D%E5%88%B6"><span class="toc-number">3.18.</span> <span class="toc-text">18.如何实现页面文本不可复制</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#19-%E5%BC%82%E6%AD%A5%E5%8A%A0%E8%BD%BD-JS-%E8%84%9A%E6%9C%AC%E6%97%B6%EF%BC%8Casync-%E4%B8%8E-defer-%E6%9C%89%E4%BD%95%E5%8C%BA%E5%88%AB"><span class="toc-number">3.19.</span> <span class="toc-text">19.异步加载 JS 脚本时，async 与 defer 有何区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#20-load-%E4%BA%8B%E4%BB%B6%E4%B8%8E-DomContentLoaded-%E4%BA%8B%E4%BB%B6%E7%9A%84%E5%85%88%E5%90%8E%E9%A1%BA%E5%BA%8F"><span class="toc-number">3.20.</span> <span class="toc-text">20.load 事件与 DomContentLoaded 事件的先后顺序</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#21-React-Vue-%E4%B8%AD%E7%9A%84-router-%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%E5%A6%82%E4%BD%95"><span class="toc-number">3.21.</span> <span class="toc-text">21.React&#x2F;Vue 中的 router 实现原理如何</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-history-API"><span class="toc-number">3.21.1.</span> <span class="toc-text">1.history API</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-hash"><span class="toc-number">3.21.2.</span> <span class="toc-text">2.hash</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#22-%E5%89%8D%E7%AB%AF%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0%E5%8A%9F%E8%83%BD"><span class="toc-number">3.22.</span> <span class="toc-text">22.前端如何实现文件上传功能</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#23-%E4%BB%80%E4%B9%88%E6%98%AF-HTML-%E7%9A%84%E5%AE%9E%E4%BD%93%E7%BC%96%E7%A0%81-HTML-Entity-Encode"><span class="toc-number">3.23.</span> <span class="toc-text">23.什么是 HTML 的实体编码 (HTML Entity Encode)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#24-%E5%A6%82%E4%BD%95%E5%8F%96%E6%B6%88%E8%AF%B7%E6%B1%82%E7%9A%84%E5%8F%91%E9%80%81"><span class="toc-number">3.24.</span> <span class="toc-text">24.如何取消请求的发送</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-XHR-%E4%BD%BF%E7%94%A8-xhr-abort-1"><span class="toc-number">3.24.1.</span> <span class="toc-text">1.XHR 使用 xhr.abort()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-fetch-%E4%BD%BF%E7%94%A8-AbortController-1"><span class="toc-number">3.24.2.</span> <span class="toc-text">2.fetch 使用 AbortController</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#25-DOM-%E4%B8%AD%E5%A6%82%E4%BD%95%E9%98%BB%E6%AD%A2%E4%BA%8B%E4%BB%B6%E9%BB%98%E8%AE%A4%E8%A1%8C%E4%B8%BA%EF%BC%8C%E5%A6%82%E4%BD%95%E5%88%A4%E6%96%AD%E4%BA%8B%E4%BB%B6%E5%90%A6%E5%8F%AF%E9%98%BB%E6%AD%A2%EF%BC%9F"><span class="toc-number">3.25.</span> <span class="toc-text">25.DOM 中如何阻止事件默认行为，如何判断事件否可阻止？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#26-%E4%BB%80%E4%B9%88%E6%98%AF%E4%BA%8B%E4%BB%B6%E5%86%92%E6%B3%A1%E5%92%8C%E4%BA%8B%E4%BB%B6%E6%8D%95%E8%8E%B7"><span class="toc-number">3.26.</span> <span class="toc-text">26.什么是事件冒泡和事件捕获</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#27-%E4%BB%80%E4%B9%88%E6%98%AF%E4%BA%8B%E4%BB%B6%E5%A7%94%E6%89%98%EF%BC%8Ce-currentTarget-%E4%B8%8E-e-target-%E6%9C%89%E4%BD%95%E5%8C%BA%E5%88%AB"><span class="toc-number">3.27.</span> <span class="toc-text">27.什么是事件委托，e.currentTarget 与 e.target 有何区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#28-%E5%85%B3%E4%BA%8E%E4%BA%8B%E4%BB%B6%E6%8D%95%E8%8E%B7%E5%92%8C%E5%86%92%E6%B3%A1%EF%BC%8C%E4%BB%A5%E4%B8%8B%E4%BB%A3%E7%A0%81%E8%BE%93%E5%87%BA%E5%A4%9A%E5%B0%91"><span class="toc-number">3.28.</span> <span class="toc-text">28.关于事件捕获和冒泡，以下代码输出多少</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#29-%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%AD-cookie-%E6%9C%89%E5%93%AA%E4%BA%9B%E5%AD%97%E6%AE%B5"><span class="toc-number">3.29.</span> <span class="toc-text">29.浏览器中 cookie 有哪些字段</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#30-DOM-%E4%B8%AD-Element-%E4%B8%8E-Node-%E6%9C%89%E4%BD%95%E5%8C%BA%E5%88%AB"><span class="toc-number">3.30.</span> <span class="toc-text">30.DOM 中 Element 与 Node 有何区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#31-SameSite-Cookie-%E6%9C%89%E5%93%AA%E4%BA%9B%E5%80%BC%EF%BC%8C%E6%98%AF%E5%A6%82%E4%BD%95%E9%A2%84%E9%98%B2-CSRF-%E6%94%BB%E5%87%BB%E7%9A%84"><span class="toc-number">3.31.</span> <span class="toc-text">31.SameSite Cookie 有哪些值，是如何预防 CSRF 攻击的</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#32-sessionStorage-%E4%B8%8E-localStorage-%E6%9C%89%E4%BD%95%E5%8C%BA%E5%88%AB"><span class="toc-number">3.32.</span> <span class="toc-text">32.sessionStorage 与 localStorage 有何区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#33-%E5%A6%82%E4%BD%95%E8%AE%BE%E7%BD%AE%E4%B8%80%E4%B8%AA%E6%94%AF%E6%8C%81%E8%BF%87%E6%9C%9F%E6%97%B6%E9%97%B4%E7%9A%84-localStorage"><span class="toc-number">3.33.</span> <span class="toc-text">33.如何设置一个支持过期时间的 localStorage</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#34-%E5%A6%82%E4%BD%95%E7%BB%9F%E8%AE%A1%E5%BD%93%E5%89%8D%E9%A1%B5%E9%9D%A2%E5%87%BA%E7%8E%B0%E7%9A%84%E6%89%80%E6%9C%89%E6%A0%87%E7%AD%BE"><span class="toc-number">3.34.</span> <span class="toc-text">34.如何统计当前页面出现的所有标签</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#35-%E5%A6%82%E4%BD%95%E7%9B%91%E5%90%AC-localStorage-%E7%9A%84%E5%8F%98%E5%8A%A8"><span class="toc-number">3.35.</span> <span class="toc-text">35.如何监听 localStorage 的变动</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#36-Data-URL-%E7%9A%84%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF%E5%8F%8A%E5%A6%82%E4%BD%95%E7%94%9F%E6%88%90"><span class="toc-number">3.36.</span> <span class="toc-text">36.Data URL 的应用场景及如何生成</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#37-%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%AD%E4%BA%8B%E4%BB%B6%E6%9C%89%E5%93%AA%E4%BA%9B%E5%B1%9E%E6%80%A7%E4%B8%8E%E6%96%B9%E6%B3%95"><span class="toc-number">3.37.</span> <span class="toc-text">37.浏览器中事件有哪些属性与方法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#38-%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%AD%E5%A6%82%E4%BD%95%E8%AF%BB%E5%8F%96%E4%BA%8C%E8%BF%9B%E5%88%B6%E4%BF%A1%E6%81%AF"><span class="toc-number">3.38.</span> <span class="toc-text">38.浏览器中如何读取二进制信息</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#39-React-%E4%B8%AD%E7%9B%91%E5%90%AC-input-%E7%9A%84-onChange-%E4%BA%8B%E4%BB%B6%E7%9A%84%E5%8E%9F%E7%94%9F%E4%BA%8B%E4%BB%B6%E6%98%AF%E4%BB%80%E4%B9%88"><span class="toc-number">3.39.</span> <span class="toc-text">39.React 中监听 input 的 onChange 事件的原生事件是什么</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#40-%E5%9C%A8%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%AD%E7%82%B9%E5%87%BB-a-%E6%A0%87%E7%AD%BE%E4%BF%9D%E5%AD%98%E4%B8%BA%E6%96%87%E4%BB%B6%E5%A6%82%E4%BD%95%E5%81%9A"><span class="toc-number">3.40.</span> <span class="toc-text">40.在浏览器中点击 a 标签保存为文件如何做</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#41-%E5%A6%82%E4%BD%95%E7%A6%81%E6%AD%A2%E6%89%93%E5%BC%80%E6%B5%8F%E8%A7%88%E5%99%A8%E6%8E%A7%E5%88%B6%E5%8F%B0"><span class="toc-number">3.41.</span> <span class="toc-text">41.如何禁止打开浏览器控制台</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#42-%E7%AE%80%E8%BF%B0%E4%B8%8B-WebWorker%EF%BC%8C%E5%AE%83%E5%A6%82%E4%BD%95%E8%BF%9B%E8%A1%8C%E9%80%9A%E4%BF%A1"><span class="toc-number">3.42.</span> <span class="toc-text">42.简述下 WebWorker，它如何进行通信</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#43-%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%AD%E7%9B%91%E5%90%AC%E4%BA%8B%E4%BB%B6%E5%87%BD%E6%95%B0-addEventListener-%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0%E6%9C%89%E9%82%A3%E4%BA%9B%E5%80%BC"><span class="toc-number">3.43.</span> <span class="toc-text">43.浏览器中监听事件函数 addEventListener 第三个参数有那些值</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#44-%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%AD-Frame-%E4%B8%8E-Event-Loop-%E7%9A%84%E5%85%B3%E7%B3%BB%E6%98%AF%E4%BB%80%E4%B9%88"><span class="toc-number">3.44.</span> <span class="toc-text">44.浏览器中 Frame 与 Event Loop 的关系是什么</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#45-%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%AD%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8%E5%8E%9F%E7%94%9F%E7%9A%84-ESM"><span class="toc-number">3.45.</span> <span class="toc-text">45.浏览器中如何使用原生的 ESM</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-ImportMap"><span class="toc-number">3.45.1.</span> <span class="toc-text">1.ImportMap</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-Import-Assertion"><span class="toc-number">3.45.2.</span> <span class="toc-text">2.Import Assertion</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#JavaScript%E7%B3%BB%E5%88%97-%E5%85%B1167%E9%A2%98"><span class="toc-number">4.</span> <span class="toc-text">JavaScript系列 共167题</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4Javascript%E4%B8%AD%E7%9A%84%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%EF%BC%9F%E5%8C%BA%E5%88%AB%EF%BC%9F"><span class="toc-number">4.1.</span> <span class="toc-text">1.面试官：说说Javascript中的数据类型？区别？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9AJavscript%E6%95%B0%E7%BB%84%E7%9A%84%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F"><span class="toc-number">4.2.</span> <span class="toc-text">2.面试官：Javscript数组的常用方法有哪些？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9AJavascript%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%9A%84%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F"><span class="toc-number">4.3.</span> <span class="toc-text">3.面试官：Javascript字符串的常用方法有哪些？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%B0%88%E8%B0%88-Javascript-%E4%B8%AD%E7%9A%84%E7%B1%BB%E5%9E%8B%E8%BD%AC%E6%8D%A2%E6%9C%BA%E5%88%B6"><span class="toc-number">4.4.</span> <span class="toc-text">4.面试官：谈谈 Javascript 中的类型转换机制</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A-%E5%92%8C-%E5%8C%BA%E5%88%AB%EF%BC%8C%E5%88%86%E5%88%AB%E5%9C%A8%E4%BB%80%E4%B9%88%E6%83%85%E5%86%B5%E4%BD%BF%E7%94%A8"><span class="toc-number">4.5.</span> <span class="toc-text">5.面试官：&#x3D;&#x3D; 和 &#x3D;&#x3D;&#x3D;区别，分别在什么情况使用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E6%B7%B1%E6%8B%B7%E8%B4%9D%E6%B5%85%E6%8B%B7%E8%B4%9D%E7%9A%84%E5%8C%BA%E5%88%AB%EF%BC%9F%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E6%B7%B1%E6%8B%B7%E8%B4%9D%EF%BC%9F"><span class="toc-number">4.6.</span> <span class="toc-text">6.面试官：深拷贝浅拷贝的区别？如何实现一个深拷贝？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#7-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9%E9%97%AD%E5%8C%85%E7%9A%84%E7%90%86%E8%A7%A3"><span class="toc-number">4.7.</span> <span class="toc-text">7.面试官：说说你对闭包的理解</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#8-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9%E4%BD%9C%E7%94%A8%E5%9F%9F%E9%93%BE%E7%9A%84%E7%90%86%E8%A7%A3"><span class="toc-number">4.8.</span> <span class="toc-text">8.面试官：说说你对作用域链的理解</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#9-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9AJavaScript%E5%8E%9F%E5%9E%8B%EF%BC%8C%E5%8E%9F%E5%9E%8B%E9%93%BE-%E6%9C%89%E4%BB%80%E4%B9%88%E7%89%B9%E7%82%B9%EF%BC%9F"><span class="toc-number">4.9.</span> <span class="toc-text">9.面试官：JavaScript原型，原型链 ? 有什么特点？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#10-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9AJavascript%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E7%BB%A7%E6%89%BF%EF%BC%9F"><span class="toc-number">4.10.</span> <span class="toc-text">10.面试官：Javascript如何实现继承？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#11-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%B0%88%E8%B0%88this%E5%AF%B9%E8%B1%A1%E7%9A%84%E7%90%86%E8%A7%A3"><span class="toc-number">4.11.</span> <span class="toc-text">11.面试官：谈谈this对象的理解</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#12-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9AJavaScript%E4%B8%AD%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87%E5%92%8C%E6%89%A7%E8%A1%8C%E6%A0%88%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F"><span class="toc-number">4.12.</span> <span class="toc-text">12.面试官：JavaScript中执行上下文和执行栈是什么？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#13-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4JavaScript%E4%B8%AD%E7%9A%84%E4%BA%8B%E4%BB%B6%E6%A8%A1%E5%9E%8B"><span class="toc-number">4.13.</span> <span class="toc-text">13.面试官：说说JavaScript中的事件模型</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#14-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9Atypeof-%E4%B8%8E-instanceof-%E5%8C%BA%E5%88%AB"><span class="toc-number">4.14.</span> <span class="toc-text">14.面试官：typeof 与 instanceof 区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#15-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%A7%A3%E9%87%8A%E4%B8%8B%E4%BB%80%E4%B9%88%E6%98%AF%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86%EF%BC%9F%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF%EF%BC%9F"><span class="toc-number">4.15.</span> <span class="toc-text">15.面试官：解释下什么是事件代理？应用场景？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#16-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4new%E6%93%8D%E4%BD%9C%E7%AC%A6%E5%85%B7%E4%BD%93%E5%B9%B2%E4%BA%86%E4%BB%80%E4%B9%88%EF%BC%9F"><span class="toc-number">4.16.</span> <span class="toc-text">16.面试官：说说new操作符具体干了什么？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#17-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9Aajax%E5%8E%9F%E7%90%86%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%EF%BC%9F"><span class="toc-number">4.17.</span> <span class="toc-text">17.面试官：ajax原理是什么？如何实现？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#18-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9Abind%E3%80%81call%E3%80%81apply-%E5%8C%BA%E5%88%AB%EF%BC%9F%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AAbind"><span class="toc-number">4.18.</span> <span class="toc-text">18.面试官：bind、call、apply 区别？如何实现一个bind?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#19-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF%EF%BC%9F"><span class="toc-number">4.19.</span> <span class="toc-text">19.面试官：说说你对正则表达式的理解？应用场景？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#20-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF%E7%9A%84%E7%90%86%E8%A7%A3"><span class="toc-number">4.20.</span> <span class="toc-text">20.面试官：说说你对事件循环的理解</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#21-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9ADOM%E5%B8%B8%E8%A7%81%E7%9A%84%E6%93%8D%E4%BD%9C%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F"><span class="toc-number">4.21.</span> <span class="toc-text">21.面试官：DOM常见的操作有哪些？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#22-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9BOM%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%8C%E5%B8%B8%E8%A7%81%E7%9A%84BOM%E5%AF%B9%E8%B1%A1%E4%BD%A0%E4%BA%86%E8%A7%A3%E5%93%AA%E4%BA%9B%EF%BC%9F"><span class="toc-number">4.22.</span> <span class="toc-text">22.面试官：说说你对BOM的理解，常见的BOM对象你了解哪些？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#23-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E4%B8%BE%E4%BE%8B%E8%AF%B4%E6%98%8E%E4%BD%A0%E5%AF%B9%E5%B0%BE%E9%80%92%E5%BD%92%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%8C%E6%9C%89%E5%93%AA%E4%BA%9B%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF"><span class="toc-number">4.23.</span> <span class="toc-text">23.面试官：举例说明你对尾递归的理解，有哪些应用场景</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#24-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4-JavaScript-%E4%B8%AD%E5%86%85%E5%AD%98%E6%B3%84%E6%BC%8F%E7%9A%84%E5%87%A0%E7%A7%8D%E6%83%85%E5%86%B5%EF%BC%9F"><span class="toc-number">4.24.</span> <span class="toc-text">24.面试官：说说 JavaScript 中内存泄漏的几种情况？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#25-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9AJavascript%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8%E7%9A%84%E6%96%B9%E5%BC%8F%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F%E5%8C%BA%E5%88%AB%E5%8F%8A%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF%EF%BC%9F"><span class="toc-number">4.25.</span> <span class="toc-text">25.面试官：Javascript本地存储的方式有哪些？区别及应用场景？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#26-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BC%96%E7%A8%8B%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E4%BC%98%E7%BC%BA%E7%82%B9%EF%BC%9F"><span class="toc-number">4.26.</span> <span class="toc-text">26.面试官：说说你对函数式编程的理解？优缺点？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#27-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9AJavascript%E4%B8%AD%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E5%87%BD%E6%95%B0%E7%BC%93%E5%AD%98%EF%BC%9F%E5%87%BD%E6%95%B0%E7%BC%93%E5%AD%98%E6%9C%89%E5%93%AA%E4%BA%9B%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF%EF%BC%9F"><span class="toc-number">4.27.</span> <span class="toc-text">27.面试官：Javascript中如何实现函数缓存？函数缓存有哪些应用场景？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#28-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4-Javascript-%E6%95%B0%E5%AD%97%E7%B2%BE%E5%BA%A6%E4%B8%A2%E5%A4%B1%E7%9A%84%E9%97%AE%E9%A2%98%EF%BC%8C%E5%A6%82%E4%BD%95%E8%A7%A3%E5%86%B3%EF%BC%9F"><span class="toc-number">4.28.</span> <span class="toc-text">28.面试官：说说 Javascript 数字精度丢失的问题，如何解决？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#29-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E4%BB%80%E4%B9%88%E6%98%AF%E9%98%B2%E6%8A%96%E5%92%8C%E8%8A%82%E6%B5%81%EF%BC%9F%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB%EF%BC%9F%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%EF%BC%9F-opens-new-window"><span class="toc-number">4.29.</span> <span class="toc-text">29.面试官：什么是防抖和节流？有什么区别？如何实现？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#30-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E5%A6%82%E4%BD%95%E5%88%A4%E6%96%AD%E4%B8%80%E4%B8%AA%E5%85%83%E7%B4%A0%E6%98%AF%E5%90%A6%E5%9C%A8%E5%8F%AF%E8%A7%86%E5%8C%BA%E5%9F%9F%E4%B8%AD%EF%BC%9F-opens-new-window"><span class="toc-number">4.30.</span> <span class="toc-text">30.面试官：如何判断一个元素是否在可视区域中？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#31-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E5%A4%A7%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0%E5%A6%82%E4%BD%95%E5%81%9A%E6%96%AD%E7%82%B9%E7%BB%AD%E4%BC%A0%EF%BC%9F-opens-new-window"><span class="toc-number">4.31.</span> <span class="toc-text">31.面试官：大文件上传如何做断点续传？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#32-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E4%B8%8A%E6%8B%89%E5%8A%A0%E8%BD%BD%EF%BC%8C%E4%B8%8B%E6%8B%89%E5%88%B7%E6%96%B0%EF%BC%9F-opens-new-window"><span class="toc-number">4.32.</span> <span class="toc-text">32.面试官：如何实现上拉加载，下拉刷新？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#33-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E4%BB%80%E4%B9%88%E6%98%AF%E5%8D%95%E7%82%B9%E7%99%BB%E5%BD%95%EF%BC%9F%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%EF%BC%9F-opens-new-window"><span class="toc-number">4.33.</span> <span class="toc-text">33.面试官：什么是单点登录？如何实现？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#34-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9Aweb%E5%B8%B8%E8%A7%81%E7%9A%84%E6%94%BB%E5%87%BB%E6%96%B9%E5%BC%8F%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F%E5%A6%82%E4%BD%95%E9%98%B2%E5%BE%A1%EF%BC%9F-opens-new-window"><span class="toc-number">4.34.</span> <span class="toc-text">34.面试官：web常见的攻击方式有哪些？如何防御？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#35-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E7%AE%80%E5%8D%95%E7%9A%84-Promise"><span class="toc-number">4.35.</span> <span class="toc-text">35.如何实现一个简单的 Promise</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#36-%E5%9C%A8%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E4%B8%AD%EF%BC%8C%E5%A6%82%E4%BD%95%E8%8E%B7%E5%8F%96%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84%E5%94%AF%E4%B8%80%E6%A0%87%E8%AF%86"><span class="toc-number">4.36.</span> <span class="toc-text">36.在前端开发中，如何获取浏览器的唯一标识</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%AE%80%E7%AD%94"><span class="toc-number">4.36.1.</span> <span class="toc-text">简答</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#37-js-%E4%B8%AD%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0-bind"><span class="toc-number">4.37.</span> <span class="toc-text">37.js 中如何实现 bind</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#38-js-%E4%B8%AD%E4%BB%80%E4%B9%88%E6%98%AF-softbind%EF%BC%8C%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0"><span class="toc-number">4.38.</span> <span class="toc-text">38.js 中什么是 softbind，如何实现</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#39-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0-promise-map%EF%BC%8C%E9%99%90%E5%88%B6-promise-%E5%B9%B6%E5%8F%91%E6%95%B0"><span class="toc-number">4.39.</span> <span class="toc-text">39.如何实现 promise.map，限制 promise 并发数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#40-%E6%9C%89%E6%B2%A1%E6%9C%89%E7%94%A8-npm-%E5%8F%91%E5%B8%83%E8%BF%87-package%EF%BC%8C%E5%A6%82%E4%BD%95%E5%8F%91%E5%B8%83"><span class="toc-number">4.40.</span> <span class="toc-text">40.有没有用 npm 发布过 package，如何发布</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E6%AD%A5%E9%AA%A4"><span class="toc-number">4.40.1.</span> <span class="toc-text">1.步骤</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E5%85%B6%E4%BB%96"><span class="toc-number">4.40.2.</span> <span class="toc-text">2.其他</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#41-js-%E4%BB%A3%E7%A0%81%E5%8E%8B%E7%BC%A9-minify-%E7%9A%84%E5%8E%9F%E7%90%86%E6%98%AF%E4%BB%80%E4%B9%88"><span class="toc-number">4.41.</span> <span class="toc-text">41.js 代码压缩 minify 的原理是什么</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E5%8E%BB%E9%99%A4%E5%A4%9A%E4%BD%99%E5%AD%97%E7%AC%A6-%E7%A9%BA%E6%A0%BC%EF%BC%8C%E6%8D%A2%E8%A1%8C%E5%8F%8A%E6%B3%A8%E9%87%8A"><span class="toc-number">4.41.1.</span> <span class="toc-text">1.去除多余字符: 空格，换行及注释</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E5%8E%8B%E7%BC%A9%E5%8F%98%E9%87%8F%E5%90%8D%EF%BC%9A%E5%8F%98%E9%87%8F%E5%90%8D%EF%BC%8C%E5%87%BD%E6%95%B0%E5%90%8D%E5%8F%8A%E5%B1%9E%E6%80%A7%E5%90%8D"><span class="toc-number">4.41.2.</span> <span class="toc-text">2.压缩变量名：变量名，函数名及属性名</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E8%A7%A3%E6%9E%90%E7%A8%8B%E5%BA%8F%E9%80%BB%E8%BE%91%EF%BC%9A%E5%90%88%E5%B9%B6%E5%A3%B0%E6%98%8E%E4%BB%A5%E5%8F%8A%E5%B8%83%E5%B0%94%E5%80%BC%E7%AE%80%E5%8C%96"><span class="toc-number">4.41.3.</span> <span class="toc-text">3.解析程序逻辑：合并声明以及布尔值简化</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-%E8%A7%A3%E6%9E%90%E7%A8%8B%E5%BA%8F%E9%80%BB%E8%BE%91-%E7%BC%96%E8%AF%91%E9%A2%84%E8%AE%A1%E7%AE%97"><span class="toc-number">4.41.4.</span> <span class="toc-text">4.解析程序逻辑: 编译预计算</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#42-%E5%85%B3%E4%BA%8E-JSON%EF%BC%8C%E4%BB%A5%E4%B8%8B%E4%BB%A3%E7%A0%81%E8%BE%93%E5%87%BA%E4%BB%80%E4%B9%88"><span class="toc-number">4.42.</span> <span class="toc-text">42.关于 JSON，以下代码输出什么</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#43-%E4%BB%80%E4%B9%88%E6%98%AF-CSRF-%E6%94%BB%E5%87%BB"><span class="toc-number">4.43.</span> <span class="toc-text">43.什么是 CSRF 攻击</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#44-%E5%9C%A8-js-%E4%B8%AD%E5%A6%82%E4%BD%95%E6%8A%8A%E7%B1%BB%E6%95%B0%E7%BB%84%E8%BD%AC%E5%8C%96%E4%B8%BA%E6%95%B0%E7%BB%84"><span class="toc-number">4.44.</span> <span class="toc-text">44.在 js 中如何把类数组转化为数组</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-ES6"><span class="toc-number">4.44.1.</span> <span class="toc-text">1.ES6+</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-ES5"><span class="toc-number">4.44.2.</span> <span class="toc-text">2.ES5</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E7%A8%80%E7%96%8F%E6%95%B0%E7%BB%84-sparse-array"><span class="toc-number">4.44.3.</span> <span class="toc-text">3.稀疏数组 (sparse array)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-%E6%80%BB%E7%BB%93"><span class="toc-number">4.44.4.</span> <span class="toc-text">4.总结</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#45-Array-100-map-x-gt-1-%E7%BB%93%E6%9E%9C%E6%98%AF%E5%A4%9A%E5%B0%91"><span class="toc-number">4.45.</span> <span class="toc-text">45.Array(100).map(x &#x3D;&gt; 1) 结果是多少</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#46-%E5%A6%82%E4%BD%95%E5%9C%A8-url-%E4%B8%AD%E4%BC%A0%E9%80%92%E6%95%B0%E7%BB%84"><span class="toc-number">4.46.</span> <span class="toc-text">46.如何在 url 中传递数组</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#47-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0-compose-%E5%87%BD%E6%95%B0%EF%BC%8C%E8%BF%9B%E8%A1%8C%E5%87%BD%E6%95%B0%E5%90%88%E6%88%90"><span class="toc-number">4.47.</span> <span class="toc-text">47.如何实现 compose 函数，进行函数合成</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#48-%E5%89%8D%E7%AB%AF%E4%B8%AD%E9%81%87%E5%88%B0%E8%BF%87%E5%A4%84%E7%90%86%E4%BA%8C%E8%BF%9B%E5%88%B6%E7%9A%84%E5%9C%BA%E6%99%AF%E5%90%97"><span class="toc-number">4.48.</span> <span class="toc-text">48.前端中遇到过处理二进制的场景吗</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#49-%E4%BB%80%E4%B9%88%E6%98%AF-TypedArray"><span class="toc-number">4.49.</span> <span class="toc-text">49.什么是 TypedArray</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#50-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E7%B1%BB%E4%BC%BC-lodash-get-%E5%87%BD%E6%95%B0"><span class="toc-number">4.50.</span> <span class="toc-text">50.如何实现类似 lodash.get 函数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#51-js-%E4%B8%AD%E4%BB%80%E4%B9%88%E6%98%AF%E5%8F%AF%E9%80%89%E9%93%BE%E6%93%8D%E4%BD%9C%E7%AC%A6%EF%BC%8C%E5%A6%82%E4%BD%95%E8%AE%BF%E9%97%AE%E6%95%B0%E7%BB%84"><span class="toc-number">4.51.</span> <span class="toc-text">51.js 中什么是可选链操作符，如何访问数组</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#52-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E6%B7%B1%E6%8B%B7%E8%B4%9D-cloneDeep"><span class="toc-number">4.52.</span> <span class="toc-text">52.如何实现一个深拷贝 (cloneDeep)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#53-%E4%BB%80%E4%B9%88%E6%98%AF%E8%B7%A8%E5%9F%9F%EF%BC%8C%E5%A6%82%E4%BD%95%E8%A7%A3%E5%86%B3%E8%B7%A8%E5%9F%9F%E9%97%AE%E9%A2%98"><span class="toc-number">4.53.</span> <span class="toc-text">53.什么是跨域，如何解决跨域问题</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E8%B7%A8%E5%9F%9F-1"><span class="toc-number">4.53.1.</span> <span class="toc-text">1.跨域</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E5%A6%82%E4%BD%95%E8%A7%A3%E5%86%B3%E8%B7%A8%E5%9F%9F-1"><span class="toc-number">4.53.2.</span> <span class="toc-text">2.如何解决跨域</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#54-%E8%AF%B7%E7%AE%80%E8%BF%B0%E4%B8%80%E4%B8%8B-event-loop"><span class="toc-number">4.54.</span> <span class="toc-text">54.请简述一下 event loop</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#55-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA-flatMap-%E5%87%BD%E6%95%B0-%E5%A4%B4%E6%9D%A1"><span class="toc-number">4.55.</span> <span class="toc-text">55.如何实现一个 flatMap 函数 (头条)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#56-%E5%A6%82%E4%BD%95%E8%A3%81%E5%89%AA%E5%9B%BE%E7%89%87-%E6%83%85%E6%99%AF%EF%BC%9A%E9%80%89%E6%8B%A9%E5%A4%B4%E5%83%8F"><span class="toc-number">4.56.</span> <span class="toc-text">56.如何裁剪图片 (情景：选择头像)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#57-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA-async-await"><span class="toc-number">4.57.</span> <span class="toc-text">57.如何实现一个 async&#x2F;await</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#58-%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8-async-await-%E5%AE%9E%E7%8E%B0-Promise-all-%E7%9A%84%E6%95%88%E6%9E%9C"><span class="toc-number">4.58.</span> <span class="toc-text">58.如何使用 async&#x2F;await 实现 Promise.all 的效果</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#59-%E6%9C%89%E6%B2%A1%E6%9C%89%E9%81%87%E5%88%B0-js-%E6%8D%95%E6%8D%89%E4%B8%8D%E5%88%B0%E5%BC%82%E5%B8%B8%E5%A0%86%E6%A0%88%E4%BF%A1%E6%81%AF%E7%9A%84%E6%83%85%E5%86%B5"><span class="toc-number">4.59.</span> <span class="toc-text">59.有没有遇到 js 捕捉不到异常堆栈信息的情况</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#60-%E6%9C%89%E6%B2%A1%E6%9C%89%E7%94%A8%E8%BF%87-Promise-allSettled-%EF%BC%8C%E5%AE%83%E6%98%AF%E5%B9%B2%E4%BB%80%E4%B9%88%E7%9A%84"><span class="toc-number">4.60.</span> <span class="toc-text">60.有没有用过 Promise.allSettled() ，它是干什么的</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#61-%E4%BD%BF%E7%94%A8-js-%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA-lru-cache"><span class="toc-number">4.61.</span> <span class="toc-text">61.使用 js 实现一个 lru cache</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#62-cookie-%E6%9C%89%E5%93%AA%E4%BA%9B%E5%AD%97%E6%AE%B5"><span class="toc-number">4.62.</span> <span class="toc-text">62.cookie 有哪些字段</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#63-%E4%BD%A0%E4%BB%AC%E9%A1%B9%E7%9B%AE%E7%9A%84%E6%B5%8B%E8%AF%95%E8%A6%86%E7%9B%96%E7%8E%87%E6%98%AF%E6%80%8E%E4%B9%88%E5%81%9A%E7%9A%84"><span class="toc-number">4.63.</span> <span class="toc-text">63.你们项目的测试覆盖率是怎么做的</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#64-bind-%E4%B8%8E-call-apply-%E7%9A%84%E5%8C%BA%E5%88%AB%E6%98%AF%E4%BB%80%E4%B9%88"><span class="toc-number">4.64.</span> <span class="toc-text">64.bind 与 call&#x2F;apply 的区别是什么</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#65-%E5%A6%82%E4%BD%95%E6%9F%A5%E7%9C%8B%E4%BD%A0%E4%BB%AC-JS-%E9%A1%B9%E7%9B%AE%E4%B8%AD%E5%BA%94%E9%87%87%E7%94%A8%E7%9A%84-node-%E7%89%88%E6%9C%AC"><span class="toc-number">4.65.</span> <span class="toc-text">65.如何查看你们 JS 项目中应采用的 node 版本</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#66-%E6%9C%89%E6%B2%A1%E6%9C%89%E5%81%9A%E8%BF%87%E8%A3%81%E5%89%AA%E5%A4%B4%E5%83%8F%E5%9B%BE%E7%89%87%E7%9A%84%E9%9C%80%E6%B1%82%EF%BC%8C%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0"><span class="toc-number">4.66.</span> <span class="toc-text">66.有没有做过裁剪头像图片的需求，如何实现</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#67-%E7%AE%80%E8%BF%B0-node-v8-%E4%B8%AD%E7%9A%84%E5%9E%83%E5%9C%BE%E5%9B%9E%E6%94%B6%E6%9C%BA%E5%88%B6"><span class="toc-number">4.67.</span> <span class="toc-text">67.简述 node&#x2F;v8 中的垃圾回收机制</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#68-fetch-%E4%B8%AD-credentials-%E6%8C%87%E4%BB%80%E4%B9%88%E6%84%8F%E6%80%9D%EF%BC%8C%E5%8F%AF%E4%BB%A5%E5%8F%96%E4%BB%80%E4%B9%88%E5%80%BC"><span class="toc-number">4.68.</span> <span class="toc-text">68.fetch 中 credentials 指什么意思，可以取什么值</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#69-%E5%A6%82%E4%BD%95%E5%88%A0%E9%99%A4%E9%A1%B9%E7%9B%AE%E4%B8%AD%E6%B2%A1%E6%9C%89%E4%BD%BF%E7%94%A8%E5%88%B0%E7%9A%84-package"><span class="toc-number">4.69.</span> <span class="toc-text">69.如何删除项目中没有使用到的 package</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#70-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0-Promise-race"><span class="toc-number">4.70.</span> <span class="toc-text">70.如何实现 Promise.race</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#71-js-%E4%B8%AD%E5%9C%A8-new-%E7%9A%84%E6%97%B6%E5%80%99%E5%8F%91%E7%94%9F%E4%BA%86%E4%BB%80%E4%B9%88"><span class="toc-number">4.71.</span> <span class="toc-text">71.js 中在 new 的时候发生了什么</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#72-%E4%BB%80%E4%B9%88%E6%98%AF-Iterable-%E5%AF%B9%E8%B1%A1%EF%BC%8C%E4%B8%8E-Array-%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB"><span class="toc-number">4.72.</span> <span class="toc-text">72.什么是 Iterable 对象，与 Array 有什么区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#73-js-%E5%A6%82%E4%BD%95%E5%85%A8%E9%83%A8%E6%9B%BF%E4%BB%A3%E4%B8%80%E4%B8%AA%E5%AD%90%E4%B8%B2%E4%B8%BA%E5%8F%A6%E4%B8%80%E4%B8%AA%E5%AD%90%E4%B8%B2"><span class="toc-number">4.73.</span> <span class="toc-text">73.js 如何全部替代一个子串为另一个子串</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%80%BB%E7%BB%93-%E5%8F%8A%E7%9B%B4%E6%8E%A5%E7%AD%94%E6%A1%88"><span class="toc-number">4.73.1.</span> <span class="toc-text">总结(及直接答案)</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#74-%E5%9C%A8-js-%E4%B8%AD%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E7%BB%A7%E6%89%BF"><span class="toc-number">4.74.</span> <span class="toc-text">74.在 js 中如何实现继承</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-class-extends"><span class="toc-number">4.74.1.</span> <span class="toc-text">1.class&#x2F;extends</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-function-new"><span class="toc-number">4.74.2.</span> <span class="toc-text">2.function&#x2F;new</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#75-python-%E4%B8%AD%E7%9A%84-self-%E4%B8%8E-javascript-%E4%B8%AD%E7%9A%84-this-%E6%9C%89%E4%BD%95%E4%B8%8D%E5%90%8C"><span class="toc-number">4.75.</span> <span class="toc-text">75.python 中的 self 与 javascript 中的 this 有何不同</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#76-%E4%BB%A5%E4%B8%8B%E8%BE%93%E5%87%BA%E9%A1%BA%E5%BA%8F%E5%A4%9A%E5%B0%91-setTimeout-%E4%B8%8E-promise-%E9%A1%BA%E5%BA%8F"><span class="toc-number">4.76.</span> <span class="toc-text">76.以下输出顺序多少 (setTimeout 与 promise 顺序)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#77-%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA-once-%E5%87%BD%E6%95%B0%EF%BC%8C%E8%AE%B0%E5%BF%86%E8%BF%94%E5%9B%9E%E7%BB%93%E6%9E%9C%E5%8F%AA%E6%89%A7%E8%A1%8C%E4%B8%80%E6%AC%A1"><span class="toc-number">4.77.</span> <span class="toc-text">77.实现一个 once 函数，记忆返回结果只执行一次</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#78-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E5%87%BD%E6%95%B0-isPlainObject-%E5%88%A4%E6%96%AD%E6%98%AF%E5%90%A6%E4%B8%BA%E7%BA%AF%E5%AF%B9%E8%B1%A1"><span class="toc-number">4.78.</span> <span class="toc-text">78.如何实现一个函数 isPlainObject 判断是否为纯对象</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#79-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E6%97%A0%E9%99%90%E7%B4%AF%E5%8A%A0%E7%9A%84-sum-%E5%87%BD%E6%95%B0"><span class="toc-number">4.79.</span> <span class="toc-text">79.如何实现一个无限累加的 sum 函数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#80-JS-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E5%90%8C%E6%AD%A5%E7%9A%84-sleep-%E5%87%BD%E6%95%B0"><span class="toc-number">4.80.</span> <span class="toc-text">80.JS 如何实现一个同步的 sleep 函数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#81-%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E5%87%BD%E6%95%B0%E7%94%A8%E6%9D%A5%E8%A7%A3%E6%9E%90-URL-%E7%9A%84-querystring"><span class="toc-number">4.81.</span> <span class="toc-text">81.实现一个函数用来解析 URL 的 querystring</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#82-JS-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA-sleep-delay-%E5%87%BD%E6%95%B0"><span class="toc-number">4.82.</span> <span class="toc-text">82.JS 如何实现一个 sleep&#x2F;delay 函数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#83-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA-sample-%E5%87%BD%E6%95%B0%EF%BC%8C%E4%BB%8E%E6%95%B0%E7%BB%84%E4%B8%AD%E9%9A%8F%E6%9C%BA%E5%8F%96%E4%B8%80%E4%B8%AA%E5%85%83%E7%B4%A0"><span class="toc-number">4.83.</span> <span class="toc-text">83.如何实现一个 sample 函数，从数组中随机取一个元素</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#84-%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84%E5%89%AA%E5%88%87%E6%9D%BF%E4%B8%AD%E5%A6%82%E4%BD%95%E7%9B%91%E5%90%AC%E5%A4%8D%E5%88%B6%E4%BA%8B%E4%BB%B6"><span class="toc-number">4.84.</span> <span class="toc-text">84.浏览器的剪切板中如何监听复制事件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#85-%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E5%87%BD%E6%95%B0%E7%94%A8%E6%9D%A5%E5%AF%B9-URL-%E7%9A%84-querystring-%E8%BF%9B%E8%A1%8C%E7%BC%96%E7%A0%81"><span class="toc-number">4.85.</span> <span class="toc-text">85.实现一个函数用来对 URL 的 querystring 进行编码</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#86-v8-%E6%98%AF%E5%A6%82%E4%BD%95%E6%89%A7%E8%A1%8C%E4%B8%80%E6%AE%B5-JS-%E4%BB%A3%E7%A0%81%E7%9A%84"><span class="toc-number">4.86.</span> <span class="toc-text">86.v8 是如何执行一段 JS 代码的</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#87-%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E6%95%B0%E7%BB%84%E6%89%81%E5%B9%B3%E5%8C%96%E7%9A%84%E5%87%BD%E6%95%B0-flatten"><span class="toc-number">4.87.</span> <span class="toc-text">87.实现一个数组扁平化的函数 flatten</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#88-%E4%BB%8B%E7%BB%8D-CSS-%E9%9A%90%E8%97%8F%E9%A1%B5%E9%9D%A2%E4%B8%AD%E6%9F%90%E4%B8%AA%E5%85%83%E7%B4%A0%E7%9A%84%E5%87%A0%E7%A7%8D%E6%96%B9%E6%B3%95"><span class="toc-number">4.88.</span> <span class="toc-text">88.介绍 CSS 隐藏页面中某个元素的几种方法</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-display-none-1"><span class="toc-number">4.88.1.</span> <span class="toc-text">1.display: none</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-opacity-0-1"><span class="toc-number">4.88.2.</span> <span class="toc-text">2.opacity: 0</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-visibility-hidden-1"><span class="toc-number">4.88.3.</span> <span class="toc-text">3.visibility: hidden</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-content-visibility-1"><span class="toc-number">4.88.4.</span> <span class="toc-text">4.content-visibility</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%E4%BA%8E%E5%BD%93%E5%89%8D%E9%A1%B5%E9%9D%A2%E7%9A%84%E4%B8%8D%E5%8F%AF%E8%A7%81%E4%BD%8D%E7%BD%AE-1"><span class="toc-number">4.88.5.</span> <span class="toc-text">5.绝对定位于当前页面的不可见位置</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#6-%E5%AD%97%E4%BD%93%E5%A4%A7%E5%B0%8F%E8%AE%BE%E7%BD%AE%E4%B8%BA-0-1"><span class="toc-number">4.88.6.</span> <span class="toc-text">6.字体大小设置为 0</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#89-%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E6%95%B0%E7%BB%84%E5%8E%BB%E9%87%8D%E5%87%BD%E6%95%B0-unique"><span class="toc-number">4.89.</span> <span class="toc-text">89.实现一个数组去重函数 unique</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#90-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E9%A1%B5%E9%9D%A2%E6%96%87%E6%9C%AC%E4%B8%8D%E5%8F%AF%E5%A4%8D%E5%88%B6"><span class="toc-number">4.90.</span> <span class="toc-text">90.如何实现页面文本不可复制</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#91-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E6%95%B0%E7%BB%84%E6%B4%97%E7%89%8C%E5%87%BD%E6%95%B0-shuffle"><span class="toc-number">4.91.</span> <span class="toc-text">91.如何实现一个数组洗牌函数 shuffle</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#92-%E5%BC%82%E6%AD%A5%E5%8A%A0%E8%BD%BD-JS-%E8%84%9A%E6%9C%AC%E6%97%B6%EF%BC%8Casync-%E4%B8%8E-defer-%E6%9C%89%E4%BD%95%E5%8C%BA%E5%88%AB"><span class="toc-number">4.92.</span> <span class="toc-text">92.异步加载 JS 脚本时，async 与 defer 有何区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#93-vue3-%E4%B8%AD%EF%BC%8C%E5%A6%82%E4%BD%95%E7%9B%91%E5%90%AC%E6%95%B0%E7%BB%84%E7%9A%84%E5%8F%98%E5%8C%96"><span class="toc-number">4.93.</span> <span class="toc-text">93.vue3 中，如何监听数组的变化</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#94-%E7%8E%B0%E4%BB%A3%E6%A1%86%E6%9E%B6%E5%A6%82-React%E3%80%81Vue-%E7%9B%B8%E6%AF%94%E5%8E%9F%E7%94%9F%E5%BC%80%E5%8F%91%E6%9C%89%E4%BB%80%E4%B9%88%E4%BC%98%E5%8A%BF"><span class="toc-number">4.94.</span> <span class="toc-text">94.现代框架如 React、Vue 相比原生开发有什么优势</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#95-typeof-%E4%B8%8E-instanceof-%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">4.95.</span> <span class="toc-text">95.typeof 与 instanceof 的区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#96-JS-%E5%A6%82%E4%BD%95%E7%BF%BB%E8%BD%AC%E4%B8%80%E4%B8%AA%E5%AD%97%E7%AC%A6%E4%B8%B2"><span class="toc-number">4.96.</span> <span class="toc-text">96.JS 如何翻转一个字符串</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#97-%E5%89%8D%E7%AB%AF%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0%E5%8A%9F%E8%83%BD"><span class="toc-number">4.97.</span> <span class="toc-text">97.前端如何实现文件上传功能</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#98-%E5%85%B3%E4%BA%8E%E6%A8%A1%E5%9D%97%E5%8C%96%EF%BC%8C%E4%BB%80%E4%B9%88%E6%98%AF-amd-%E5%92%8C-umd"><span class="toc-number">4.98.</span> <span class="toc-text">98.关于模块化，什么是 amd 和 umd</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#99-%E7%AE%80%E5%8D%95%E4%BB%8B%E7%BB%8D%E4%BB%A5%E4%B8%8B%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%AD%E7%9A%84-module"><span class="toc-number">4.99.</span> <span class="toc-text">99.简单介绍以下浏览器中的 module</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#100-%E4%BB%80%E4%B9%88%E6%98%AF-commonjs2"><span class="toc-number">4.100.</span> <span class="toc-text">100.什么是 commonjs2</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#101-%E5%89%8D%E7%AB%AF%E4%B8%8A%E4%BC%A0%E6%96%87%E4%BB%B6%E6%97%B6%E5%A6%82%E4%BD%95%E8%AF%BB%E5%8F%96%E6%96%87%E4%BB%B6%E5%86%85%E5%AE%B9"><span class="toc-number">4.101.</span> <span class="toc-text">101.前端上传文件时如何读取文件内容</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-FileReader-API"><span class="toc-number">4.101.1.</span> <span class="toc-text">1.FileReader API</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-Response-API"><span class="toc-number">4.101.2.</span> <span class="toc-text">2.Response API</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#102-%E4%BD%A0%E6%9C%80%E5%96%9C%E6%AC%A2%E7%9A%84%E4%B8%89%E4%B8%AA-js-%E5%BA%93%E6%98%AF%E4%BB%80%E4%B9%88"><span class="toc-number">4.102.</span> <span class="toc-text">102.你最喜欢的三个 js 库是什么</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-next"><span class="toc-number">4.102.1.</span> <span class="toc-text">1.next</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-swr"><span class="toc-number">4.102.2.</span> <span class="toc-text">2.swr</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-graphql"><span class="toc-number">4.102.3.</span> <span class="toc-text">3.graphql</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#103-%E7%8E%B0%E4%BB%A3%E5%8C%96%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6%E4%B8%AD%E5%A6%82%E4%BD%95%E8%BF%9B%E8%A1%8C%E8%B0%83%E8%AF%95"><span class="toc-number">4.103.</span> <span class="toc-text">103.现代化前端框架中如何进行调试</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#104-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E5%87%BD%E6%95%B0-lodash-merge"><span class="toc-number">4.104.</span> <span class="toc-text">104.如何实现一个函数 lodash.merge</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#105-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA-promise-any"><span class="toc-number">4.105.</span> <span class="toc-text">105.如何实现一个 promise.any</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#106-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA-Promise-all"><span class="toc-number">4.106.</span> <span class="toc-text">106.如何实现一个 Promise.all</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#107-%E5%A6%82%E4%BD%95%E8%BF%87%E6%BB%A4%E6%95%B0%E7%BB%84%E4%B8%AD%E7%9A%84-falsy-value"><span class="toc-number">4.107.</span> <span class="toc-text">107.如何过滤数组中的 falsy value</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#108-%E5%A6%82%E4%BD%95%E6%8A%8A%E4%B8%80%E4%B8%AA%E6%95%B0%E7%BB%84%E9%9A%8F%E6%9C%BA%E6%89%93%E4%B9%B1"><span class="toc-number">4.108.</span> <span class="toc-text">108.如何把一个数组随机打乱</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#109-JS-%E4%B8%AD%E5%9F%BA%E7%A1%80%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E6%9C%89%E5%93%AA%E4%BA%9B"><span class="toc-number">4.109.</span> <span class="toc-text">109.JS 中基础数据类型有哪些</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#110-%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E6%95%B0%E7%BB%84%E5%A4%A7%E5%B0%8F%E4%B8%BA-100%EF%BC%8C%E6%AF%8F%E4%B8%AA%E5%80%BC%E9%83%BD%E4%B8%BA-0-%E7%9A%84%E6%95%B0%E7%BB%84"><span class="toc-number">4.110.</span> <span class="toc-text">110.如何创建一个数组大小为 100，每个值都为 0 的数组</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#111-%E6%9C%89%E6%B2%A1%E6%9C%89%E4%BD%BF%E7%94%A8%E8%BF%87-async-await%EF%BC%8C%E4%BB%96%E4%BB%AC%E7%9A%84%E5%8E%9F%E7%90%86%E6%98%AF%E4%BB%80%E4%B9%88"><span class="toc-number">4.111.</span> <span class="toc-text">111.有没有使用过 async&#x2F;await，他们的原理是什么</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#112-%E4%BB%80%E4%B9%88%E6%98%AF%E9%97%AD%E5%8C%85%EF%BC%8C%E9%97%AD%E5%8C%85%E7%9A%84%E5%BA%94%E7%94%A8%E6%9C%89%E5%93%AA%E4%BA%9B%E5%9C%B0%E6%96%B9"><span class="toc-number">4.112.</span> <span class="toc-text">112.什么是闭包，闭包的应用有哪些地方</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#113-%E5%85%B3%E4%BA%8E%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF%EF%BC%8C%E4%B8%80%E9%81%93%E5%BC%82%E6%AD%A5%E4%BB%A3%E7%A0%81%E6%89%A7%E8%A1%8C%E8%BE%93%E5%87%BA%E9%A1%BA%E5%BA%8F%E9%97%AE%E9%A2%98"><span class="toc-number">4.113.</span> <span class="toc-text">113.关于事件循环，一道异步代码执行输出顺序问题</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#114-%E8%A7%A3%E6%9E%84%E8%B5%8B%E5%80%BC%E4%B8%80%E4%B8%AA%E6%95%B0%E7%BB%84%EF%BC%8Ca-%E5%8F%96%E7%AC%AC%E4%B8%80%E9%A1%B9%E9%BB%98%E8%AE%A4%E5%80%BC%E4%B8%BA-3%EF%BC%8Cc-%E5%8F%96%E5%89%A9%E4%B8%8B%E7%9A%84%E5%80%BC%E7%BB%84%E6%88%90%E6%95%B0%E7%BB%84"><span class="toc-number">4.114.</span> <span class="toc-text">114.解构赋值一个数组，a 取第一项默认值为 3，c 取剩下的值组成数组</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#115-%E8%A7%A3%E6%9E%84%E8%B5%8B%E5%80%BC%E4%BB%A5%E4%B8%8B%E5%AF%B9%E8%B1%A1%EF%BC%8C%E4%BB%96%E4%BB%AC%E7%9A%84%E5%80%BC%E6%98%AF%E5%A4%9A%E5%B0%91"><span class="toc-number">4.115.</span> <span class="toc-text">115.解构赋值以下对象，他们的值是多少</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#116-Map-%E4%B8%8E-WeakMap-%E6%9C%89%E4%BD%95%E5%8C%BA%E5%88%AB"><span class="toc-number">4.116.</span> <span class="toc-text">116.Map 与 WeakMap 有何区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#117-Javascript-%E6%95%B0%E7%BB%84%E4%B8%AD%E6%9C%89%E9%82%A3%E4%BA%9B%E6%96%B9%E6%B3%95%E5%8F%AF%E4%BB%A5%E6%94%B9%E5%8F%98%E8%87%AA%E8%BA%AB%EF%BC%8C%E9%82%A3%E4%BA%9B%E4%B8%8D%E5%8F%AF%E4%BB%A5"><span class="toc-number">4.117.</span> <span class="toc-text">117.Javascript 数组中有那些方法可以改变自身，那些不可以</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#118-%E5%A6%82%E4%BD%95%E5%88%A4%E6%96%AD%E4%B8%80%E4%B8%AA%E6%95%B0%E7%BB%84%E6%98%AF%E5%90%A6%E5%8C%85%E5%90%AB%E6%9F%90%E4%B8%AA%E5%80%BC"><span class="toc-number">4.118.</span> <span class="toc-text">118.如何判断一个数组是否包含某个值</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#119-%E5%A6%82%E4%BD%95%E5%88%A4%E6%96%AD%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%8C%85%E5%90%AB%E6%9F%90%E4%B8%AA%E5%AD%90%E4%B8%B2"><span class="toc-number">4.119.</span> <span class="toc-text">119.如何判断字符串包含某个子串</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#120-%E5%A6%82%E4%BD%95%E5%88%A4%E6%96%AD%E6%9F%90%E4%B8%80%E4%B8%AA%E5%80%BC%E6%98%AF%E6%95%B0%E7%BB%84"><span class="toc-number">4.120.</span> <span class="toc-text">120.如何判断某一个值是数组</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#121-%E7%AE%80%E8%BF%B0-Object-defineProperty"><span class="toc-number">4.121.</span> <span class="toc-text">121.简述 Object.defineProperty</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E6%95%B0%E6%8D%AE%E6%8F%8F%E8%BF%B0%E7%AC%A6-data-descriptor"><span class="toc-number">4.121.1.</span> <span class="toc-text">1.数据描述符 (data descriptor)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E5%AD%98%E5%8F%96%E6%8F%8F%E8%BF%B0%E7%AC%A6-accessor-descriptor"><span class="toc-number">4.121.2.</span> <span class="toc-text">2.存取描述符 (accessor descriptor)</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#122-Object-keys-%E4%B8%8E-Object-getOwnPropertyNames-%E6%9C%89%E4%BD%95%E5%8C%BA%E5%88%AB"><span class="toc-number">4.122.</span> <span class="toc-text">122.Object.keys 与 Object.getOwnPropertyNames() 有何区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#123-%E5%A6%82%E4%BD%95%E7%BB%9F%E8%AE%A1%E5%BD%93%E5%89%8D%E9%A1%B5%E9%9D%A2%E5%87%BA%E7%8E%B0%E7%9A%84%E6%89%80%E6%9C%89%E6%A0%87%E7%AD%BE"><span class="toc-number">4.123.</span> <span class="toc-text">123.如何统计当前页面出现的所有标签</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#124-%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA-inherits-%E5%87%BD%E6%95%B0%E8%BF%9B%E8%A1%8C%E7%BB%A7%E6%89%BF"><span class="toc-number">4.124.</span> <span class="toc-text">124.实现一个 inherits 函数进行继承</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#125-WeakMap-%E4%B8%8E%E5%9E%83%E5%9C%BE%E5%9B%9E%E6%94%B6%E6%9C%89%E4%BD%95%E5%85%B3%E7%B3%BB"><span class="toc-number">4.125.</span> <span class="toc-text">125.WeakMap 与垃圾回收有何关系</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#126-%E4%BB%80%E4%B9%88%E6%98%AF%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2%EF%BC%8CJS-%E5%8F%AF%E4%BB%A5%E7%9B%91%E5%90%AC%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2%E5%90%97"><span class="toc-number">4.126.</span> <span class="toc-text">126.什么是媒体查询，JS 可以监听媒体查询吗</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#127-%E5%85%B3%E4%BA%8E%E5%9D%97%E7%BA%A7%E4%BD%9C%E7%94%A8%E5%9F%9F%EF%BC%8C%E4%BB%A5%E4%B8%8B%E4%BB%A3%E7%A0%81%E8%BE%93%E5%87%BA%E5%A4%9A%E5%B0%91%EF%BC%8C%E5%9C%A8%E4%BD%95%E6%97%B6%E9%97%B4%E8%BE%93%E5%87%BA"><span class="toc-number">4.127.</span> <span class="toc-text">127.关于块级作用域，以下代码输出多少，在何时间输出</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#128-%E5%A6%82%E4%BD%95%E9%80%86%E5%BA%8F%E4%B8%80%E4%B8%AA%E5%AD%97%E7%AC%A6%E4%B8%B2"><span class="toc-number">4.128.</span> <span class="toc-text">128.如何逆序一个字符串</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#129-%E4%B8%BA%E4%BD%95-0-1-0-2-%E4%B8%8D%E7%AD%89%E4%BA%8E-0-3%EF%BC%8C%E5%BA%94%E5%A6%82%E4%BD%95%E5%81%9A%E7%9B%B8%E7%AD%89%E6%AF%94%E8%BE%83"><span class="toc-number">4.129.</span> <span class="toc-text">129.为何 0.1+0.2 不等于 0.3，应如何做相等比较</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#130-%E5%85%B3%E4%BA%8E-this-%E4%B8%8E%E5%8C%85%E8%A3%85%E5%AF%B9%E8%B1%A1%EF%BC%8C%E4%BB%A5%E4%B8%8B%E8%BE%93%E5%87%BA%E5%A4%9A%E5%B0%91"><span class="toc-number">4.130.</span> <span class="toc-text">130.关于 this 与包装对象，以下输出多少</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#131-%E5%85%B3%E4%BA%8E%E7%B1%BB%E5%9E%8B%E8%BD%AC%E5%8C%96%EF%BC%8C%E5%88%A4%E6%96%AD%E4%BB%A5%E4%B8%8B%E4%BB%A3%E7%A0%81%E8%BE%93%E5%87%BA"><span class="toc-number">4.131.</span> <span class="toc-text">131.关于类型转化，判断以下代码输出</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#132-%E5%85%B3%E4%BA%8E%E6%9A%82%E6%97%B6%E6%80%A7%E6%AD%BB%E5%9F%9F%EF%BC%8C%E5%88%A4%E6%96%AD%E4%BB%A5%E4%B8%8B%E4%BB%A3%E7%A0%81%E8%BE%93%E5%87%BA"><span class="toc-number">4.132.</span> <span class="toc-text">132.关于暂时性死域，判断以下代码输出</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#133-%E5%85%B3%E4%BA%8E%E8%AF%8D%E6%B3%95%E4%BD%9C%E7%94%A8%E5%9F%9F%EF%BC%8C%E5%88%A4%E6%96%AD%E4%BB%A5%E4%B8%8B%E4%BB%A3%E7%A0%81%E8%BE%93%E5%87%BA"><span class="toc-number">4.133.</span> <span class="toc-text">133.关于词法作用域，判断以下代码输出</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#134-%E5%85%B3%E4%BA%8E-this%EF%BC%8C%E5%88%A4%E6%96%AD%E4%BB%A5%E4%B8%8B%E4%BB%A3%E7%A0%81%E8%BE%93%E5%87%BA"><span class="toc-number">4.134.</span> <span class="toc-text">134.关于 this，判断以下代码输出</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#135-%E5%85%B3%E4%BA%8E-new%EF%BC%8C%E5%88%A4%E6%96%AD%E4%BB%A5%E4%B8%8B%E4%BB%A3%E7%A0%81%E8%BE%93%E5%87%BA"><span class="toc-number">4.135.</span> <span class="toc-text">135.关于 new，判断以下代码输出</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#136-%E5%85%B3%E4%BA%8E%E7%AE%80%E5%8D%95%E7%9A%84%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF%EF%BC%8C%E5%88%A4%E6%96%AD%E4%BB%A5%E4%B8%8B%E4%BB%A3%E7%A0%81%E8%BE%93%E5%87%BA"><span class="toc-number">4.136.</span> <span class="toc-text">136.关于简单的事件循环，判断以下代码输出</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#137-%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0%E5%92%8C%E6%99%AE%E9%80%9A%E5%87%BD%E6%95%B0%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">4.137.</span> <span class="toc-text">137.箭头函数和普通函数的区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#138-%E4%BB%80%E4%B9%88%E6%98%AF%E7%BA%AF%E5%87%BD%E6%95%B0"><span class="toc-number">4.138.</span> <span class="toc-text">138.什么是纯函数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#139-%E7%BB%99%E6%95%B0%E5%AD%97%E6%B7%BB%E5%8A%A0%E5%8D%83%E4%BD%8D%E7%AC%A6"><span class="toc-number">4.139.</span> <span class="toc-text">139.给数字添加千位符</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#140-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E6%B7%B1%E6%AF%94%E8%BE%83%E7%9A%84%E5%87%BD%E6%95%B0-deepEqual"><span class="toc-number">4.140.</span> <span class="toc-text">140.如何实现一个深比较的函数 deepEqual</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#141-Object-is-%E4%B8%8E%E5%85%A8%E7%AD%89%E8%BF%90%E7%AE%97%E7%AC%A6-%E6%9C%89%E4%BD%95%E5%8C%BA%E5%88%AB"><span class="toc-number">4.141.</span> <span class="toc-text">141.Object.is 与全等运算符(&#x3D;&#x3D;&#x3D;)有何区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#142-%E5%A6%82%E4%BD%95%E6%8A%8A%E5%AF%B9%E8%B1%A1%E8%BD%AC%E5%8C%96%E4%B8%BA-key-value-%E7%9A%84%E4%BA%8C%E7%BB%B4%E6%95%B0%E7%BB%84"><span class="toc-number">4.142.</span> <span class="toc-text">142.如何把对象转化为 key&#x2F;value 的二维数组</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#143-%E5%9C%A8-JS-%E4%B8%AD%E5%A6%82%E4%BD%95%E7%9B%91%E5%90%AC-Object-%E6%9F%90%E4%B8%AA%E5%B1%9E%E6%80%A7%E5%80%BC%E7%9A%84%E5%8F%98%E5%8C%96"><span class="toc-number">4.143.</span> <span class="toc-text">143.在 JS 中如何监听 Object 某个属性值的变化</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#144-js-%E4%B8%AD%E4%BB%80%E4%B9%88%E6%98%AF-AsyncIterable"><span class="toc-number">4.144.</span> <span class="toc-text">144.js 中什么是 AsyncIterable</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#145-%E5%85%B3%E4%BA%8E%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF%EF%BC%8C%E4%BB%85%E6%9C%89-Promise%EF%BC%8C%E5%88%A4%E6%96%AD%E4%BB%A5%E4%B8%8B%E4%BB%A3%E7%A0%81%E8%BE%93%E5%87%BA"><span class="toc-number">4.145.</span> <span class="toc-text">145.关于事件循环，仅有 Promise，判断以下代码输出</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#146-%E4%BA%86%E8%A7%A3%E4%BB%80%E4%B9%88%E6%98%AF-JSBridge-%E5%90%97"><span class="toc-number">4.146.</span> <span class="toc-text">146.了解什么是 JSBridge 吗</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#147-%E5%88%97%E4%B8%BE-Number%E3%80%81String%E3%80%81Array%E3%80%81Object%E3%80%81Promise-%E6%9C%89%E5%93%AA%E4%BA%9B-API"><span class="toc-number">4.147.</span> <span class="toc-text">147.列举 Number、String、Array、Object、Promise 有哪些 API</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-Number"><span class="toc-number">4.147.1.</span> <span class="toc-text">1.Number</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-String"><span class="toc-number">4.147.2.</span> <span class="toc-text">2.String</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-Array"><span class="toc-number">4.147.3.</span> <span class="toc-text">3.Array</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-Object"><span class="toc-number">4.147.4.</span> <span class="toc-text">4.Object</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#148-%E4%BD%BF%E7%94%A8-JS-%E5%A6%82%E4%BD%95%E7%94%9F%E6%88%90%E4%B8%80%E4%B8%AA%E9%9A%8F%E6%9C%BA%E5%AD%97%E7%AC%A6%E4%B8%B2"><span class="toc-number">4.148.</span> <span class="toc-text">148.使用 JS 如何生成一个随机字符串</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#149-Number-isNaN-%E4%B8%8E-globalThis-isNaN-%E6%9C%89%E4%BD%95%E5%8C%BA%E5%88%AB"><span class="toc-number">4.149.</span> <span class="toc-text">149.Number.isNaN 与 globalThis.isNaN 有何区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#150-%E5%A6%82%E4%BD%95%E5%88%A4%E6%96%AD%E4%B8%80%E4%B8%AA%E6%95%B0%E5%80%BC%E4%B8%BA%E6%95%B4%E6%95%B0"><span class="toc-number">4.150.</span> <span class="toc-text">150.如何判断一个数值为整数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#151-%E4%BB%80%E4%B9%88%E6%98%AF%E5%AE%89%E5%85%A8%E6%95%B4%E6%95%B0%EF%BC%8C%E5%A6%82%E4%BD%95%E5%88%A4%E6%96%AD%E4%B8%80%E4%B8%AA%E6%95%B4%E6%95%B0%E6%98%AF%E5%AE%89%E5%85%A8%E6%95%B4%E6%95%B0"><span class="toc-number">4.151.</span> <span class="toc-text">151.什么是安全整数，如何判断一个整数是安全整数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#152-%E5%A6%82%E4%BD%95%E6%8A%8A%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%85%A8%E9%83%A8%E8%BD%AC%E5%8C%96%E4%B8%BA%E5%B0%8F%E5%86%99%E6%A0%BC%E5%BC%8F"><span class="toc-number">4.152.</span> <span class="toc-text">152.如何把字符串全部转化为小写格式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#153-Array-%E4%B8%AD%E9%82%A3%E4%BA%9B-API-%E5%8F%AF%E6%94%B9%E5%8F%98%E8%87%AA%E8%BA%AB"><span class="toc-number">4.153.</span> <span class="toc-text">153.Array 中那些 API 可改变自身</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#154-%E5%A6%82%E4%BD%95%E6%8A%8A%E4%B8%80%E4%B8%AA%E6%95%B0%E7%BB%84-Array-%E8%BD%AC%E5%8C%96%E4%B8%BA%E8%BF%AD%E4%BB%A3%E5%99%A8-Iterable"><span class="toc-number">4.154.</span> <span class="toc-text">154.如何把一个数组 Array 转化为迭代器 Iterable</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#155-JS-%E4%B8%AD%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0-call-apply"><span class="toc-number">4.155.</span> <span class="toc-text">155.JS 中如何实现 call&#x2F;apply</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#156-Number-%E4%B8%AD%E6%9C%80%E5%A4%A7%E6%95%B0%E3%80%81%E6%9C%80%E5%A4%A7%E5%AE%89%E5%85%A8%E6%95%B4%E6%95%B0%E3%80%81EPSILON-%E9%83%BD%E6%98%AF%E5%A4%9A%E5%B0%91%EF%BC%8C%E5%8E%9F%E7%90%86%E6%98%AF%E4%BB%80%E4%B9%88"><span class="toc-number">4.156.</span> <span class="toc-text">156.Number 中最大数、最大安全整数、EPSILON 都是多少，原理是什么</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#157-JS-%E5%A6%82%E4%BD%95%E6%A3%80%E6%B5%8B%E5%88%B0%E5%AF%B9%E8%B1%A1%E4%B8%AD%E6%9C%89%E5%BE%AA%E7%8E%AF%E5%BC%95%E7%94%A8"><span class="toc-number">4.157.</span> <span class="toc-text">157.JS 如何检测到对象中有循环引用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#158-%E5%AE%9E%E7%8E%B0%E4%BA%8C%E8%BF%9B%E5%88%B6%E4%B8%8E%E5%8D%81%E8%BF%9B%E5%88%B6%E7%9A%84%E4%BA%92%E7%9B%B8%E8%BD%AC%E5%8C%96%E7%9A%84%E4%B8%A4%E4%B8%AA%E5%87%BD%E6%95%B0"><span class="toc-number">4.158.</span> <span class="toc-text">158.实现二进制与十进制的互相转化的两个函数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#159-JS-%E4%B8%AD%E5%BC%82%E6%AD%A5%E4%BB%BB%E5%8A%A1%E4%B8%BA%E4%BD%95%E5%88%86%E4%B8%BA%E5%BE%AE%E4%BB%BB%E5%8A%A1%E4%B8%8E%E5%AE%8F%E4%BB%BB%E5%8A%A1"><span class="toc-number">4.159.</span> <span class="toc-text">159.JS 中异步任务为何分为微任务与宏任务</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#160-%E4%BB%80%E4%B9%88%E6%98%AF%E5%8E%9F%E7%A0%81%E3%80%81%E8%A1%A5%E7%A0%81%E4%B8%8E%E5%8F%8D%E7%A0%81"><span class="toc-number">4.160.</span> <span class="toc-text">160.什么是原码、补码与反码</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%A1%A5%E7%A0%81"><span class="toc-number">4.160.1.</span> <span class="toc-text">补码</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#161-%E5%A6%82%E4%BD%95%E9%81%8D%E5%8E%86%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1"><span class="toc-number">4.161.</span> <span class="toc-text">161.如何遍历一个对象</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#162-setTimeout-%E4%B8%BA%E4%BB%80%E4%B9%88%E6%9C%80%E5%B0%8F%E5%8F%AA%E8%83%BD%E8%AE%BE%E7%BD%AE-4ms%EF%BC%8C%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA-0ms-%E7%9A%84-setTimeout"><span class="toc-number">4.162.</span> <span class="toc-text">162.setTimeout 为什么最小只能设置 4ms，如何实现一个 0ms 的 setTimeout?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#163-JS-%E4%B8%AD%E5%A6%82%E4%BD%95%E5%8E%9F%E7%94%9F%E5%AE%9E%E7%8E%B0-instanceOf"><span class="toc-number">4.163.</span> <span class="toc-text">163.JS 中如何原生实现 instanceOf</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#164-return-promise-%E4%B8%8E-return-await-promise-%E6%9C%89%E4%BD%95%E5%8C%BA%E5%88%AB"><span class="toc-number">4.164.</span> <span class="toc-text">164.return promise 与 return await promise 有何区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#165-%E5%9C%A8-ES6-Class-%E4%B8%AD%EF%BC%8Csuper-%E7%9A%84%E8%BF%87%E7%A8%8B%E4%B8%AD%E5%81%9A%E4%BA%86%E4%BB%80%E4%B9%88"><span class="toc-number">4.165.</span> <span class="toc-text">165.在 ES6 Class 中，super 的过程中做了什么</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#166-%E5%85%B3%E4%BA%8E-Promise%EF%BC%8C%E5%88%A4%E6%96%AD%E4%BB%A5%E4%B8%8B%E4%BB%A3%E7%A0%81%E7%9A%84%E8%BE%93%E5%87%BA"><span class="toc-number">4.166.</span> <span class="toc-text">166.关于 Promise，判断以下代码的输出</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#167-%E5%A6%82%E4%BD%95%E5%8F%96%E5%BE%97%E4%B8%80%E4%B8%AA%E6%95%B0%E5%AD%97%E7%9A%84%E5%B0%8F%E6%95%B0%E9%83%A8%E5%88%86%E4%B8%8E%E6%95%B4%E6%95%B0%E9%83%A8%E5%88%86"><span class="toc-number">4.167.</span> <span class="toc-text">167.如何取得一个数字的小数部分与整数部分</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#vue%E7%B3%BB%E5%88%97-%E5%85%B149%E9%A2%98"><span class="toc-number">5.</span> <span class="toc-text">vue系列 共49题</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9vue%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F"><span class="toc-number">5.1.</span> <span class="toc-text">1.面试官：说说你对vue的理解？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E7%9A%84%E7%90%86%E8%A7%A3"><span class="toc-number">5.2.</span> <span class="toc-text">2.面试官：说说你对双向绑定的理解?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9-SPA-%E5%8D%95%E9%A1%B5%E5%BA%94%E7%94%A8-%E7%9A%84%E7%90%86%E8%A7%A3"><span class="toc-number">5.3.</span> <span class="toc-text">3.面试官：说说你对 SPA(单页应用)的理解?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9AVue%E4%B8%AD%E7%9A%84v-show%E5%92%8Cv-if%E6%80%8E%E4%B9%88%E7%90%86%E8%A7%A3"><span class="toc-number">5.4.</span> <span class="toc-text">4.面试官：Vue中的v-show和v-if怎么理解?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9AVue%E5%AE%9E%E4%BE%8B%E6%8C%82%E8%BD%BD%E7%9A%84%E8%BF%87%E7%A8%8B%E4%B8%AD%E5%8F%91%E7%94%9F%E4%BA%86%E4%BB%80%E4%B9%88%EF%BC%9F"><span class="toc-number">5.5.</span> <span class="toc-text">5.面试官：Vue实例挂载的过程中发生了什么？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9Vue%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E7%9A%84%E7%90%86%E8%A7%A3"><span class="toc-number">5.6.</span> <span class="toc-text">6.面试官：说说你对Vue生命周期的理解?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#7-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E4%B8%BA%E4%BB%80%E4%B9%88Vue%E4%B8%AD%E7%9A%84v-fi%E5%90%88%E6%A0%BCv-for%E4%B8%8D%E5%BB%BA%E8%AE%AE%E4%B8%80%E8%B5%B7%E7%94%A8"><span class="toc-number">5.7.</span> <span class="toc-text">7.面试官：为什么Vue中的v-fi合格v-for不建议一起用?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#8-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9ASPA-%E5%8D%95%E9%A1%B5%E5%BA%94%E7%94%A8-%E9%A6%96%E5%B1%8F%E5%8A%A0%E8%BD%BD%E9%80%9F%E5%BA%A6%E6%85%A2%E6%80%8E%E4%B9%88%E8%A7%A3%E5%86%B3"><span class="toc-number">5.8.</span> <span class="toc-text">8.面试官：SPA(单页应用)首屏加载速度慢怎么解决?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#9-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E4%B8%BA%E4%BB%80%E4%B9%88data%E5%B1%9E%E6%80%A7%E6%98%AF%E4%B8%80%E4%B8%AA%E5%87%BD%E6%95%B0%E8%80%8C%E4%B8%8D%E6%98%AF%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1%EF%BC%9F"><span class="toc-number">5.9.</span> <span class="toc-text">9.面试官：为什么data属性是一个函数而不是一个对象？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#10-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9AVue%E4%B8%AD%E7%BB%99%E5%AF%B9%E8%B1%A1%E6%B7%BB%E5%8A%A0%E6%96%B0%E5%B1%9E%E6%80%A7%E7%95%8C%E9%9D%A2%E4%B8%8D%E5%88%B7%E6%96%B0"><span class="toc-number">5.10.</span> <span class="toc-text">10.面试官：Vue中给对象添加新属性界面不刷新?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#11-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9AVue%E4%B8%AD%E7%BB%84%E4%BB%B6%E5%92%8C%E6%8F%92%E4%BB%B6%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB"><span class="toc-number">5.11.</span> <span class="toc-text">11.面试官：Vue中组件和插件有什么区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#12-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9AVue%E7%BB%84%E4%BB%B6%E9%97%B4%E9%80%9A%E4%BF%A1%E6%96%B9%E5%BC%8F%E9%83%BD%E6%9C%89%E5%93%AA%E4%BA%9B"><span class="toc-number">5.12.</span> <span class="toc-text">12.面试官：Vue组件间通信方式都有哪些?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#13-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9nexttick%E7%9A%84%E7%90%86%E8%A7%A3"><span class="toc-number">5.13.</span> <span class="toc-text">13.面试官：说说你对nexttick的理解?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#14-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9vue%E7%9A%84mixin%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%8C%E6%9C%89%E4%BB%80%E4%B9%88%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF%EF%BC%9F"><span class="toc-number">5.14.</span> <span class="toc-text">14.面试官：说说你对vue的mixin的理解，有什么应用场景？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#15-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9slot%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9Fslot%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F"><span class="toc-number">5.15.</span> <span class="toc-text">15.面试官：说说你对slot的理解？slot使用场景有哪些？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#16-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9AVue-observable%E4%BD%A0%E6%9C%89%E4%BA%86%E8%A7%A3%E8%BF%87%E5%90%97%EF%BC%9F%E8%AF%B4%E8%AF%B4%E7%9C%8B"><span class="toc-number">5.16.</span> <span class="toc-text">16.面试官：Vue.observable你有了解过吗？说说看</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#17-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E4%BD%A0%E7%9F%A5%E9%81%93vue%E4%B8%ADkey%E7%9A%84%E5%8E%9F%E7%90%86%E5%90%97%EF%BC%9F%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9%E5%AE%83%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F"><span class="toc-number">5.17.</span> <span class="toc-text">17.面试官：你知道vue中key的原理吗？说说你对它的理解？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#18-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E6%80%8E%E4%B9%88%E7%BC%93%E5%AD%98%E5%BD%93%E5%89%8D%E7%9A%84%E7%BB%84%E4%BB%B6%EF%BC%9F%E7%BC%93%E5%AD%98%E5%90%8E%E6%80%8E%E4%B9%88%E6%9B%B4%E6%96%B0%EF%BC%9F%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9keep-alive%E7%9A%84%E7%90%86%E8%A7%A3%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F"><span class="toc-number">5.18.</span> <span class="toc-text">18.面试官：怎么缓存当前的组件？缓存后怎么更新？说说你对keep-alive的理解是什么？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#19-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9AVue%E5%B8%B8%E7%94%A8%E7%9A%84%E4%BF%AE%E9%A5%B0%E7%AC%A6%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F%E6%9C%89%E4%BB%80%E4%B9%88%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF%EF%BC%9F"><span class="toc-number">5.19.</span> <span class="toc-text">19.面试官：Vue常用的修饰符有哪些？有什么应用场景？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#20-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E4%BD%A0%E6%9C%89%E5%86%99%E8%BF%87%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4%E5%90%97%EF%BC%9F%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4%E7%9A%84%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F"><span class="toc-number">5.20.</span> <span class="toc-text">20.面试官：你有写过自定义指令吗？自定义指令的应用场景有哪些？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#21-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9AVue%E4%B8%AD%E7%9A%84%E8%BF%87%E6%BB%A4%E5%99%A8%E4%BA%86%E8%A7%A3%E5%90%97%EF%BC%9F%E8%BF%87%E6%BB%A4%E5%99%A8%E7%9A%84%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F"><span class="toc-number">5.21.</span> <span class="toc-text">21.面试官：Vue中的过滤器了解吗？过滤器的应用场景有哪些？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#22-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E4%BB%80%E4%B9%88%E6%98%AF%E8%99%9A%E6%8B%9FDOM%EF%BC%9F%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E8%99%9A%E6%8B%9FDOM%EF%BC%9F%E8%AF%B4%E8%AF%B4%E4%BD%A0%E7%9A%84%E6%80%9D%E8%B7%AF"><span class="toc-number">5.22.</span> <span class="toc-text">22.面试官：什么是虚拟DOM？如何实现一个虚拟DOM？说说你的思路</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#23-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E4%BA%86%E8%A7%A3%E8%BF%87vue%E4%B8%AD%E7%9A%84diff%E7%AE%97%E6%B3%95%E5%90%97%EF%BC%9F%E8%AF%B4%E8%AF%B4%E7%9C%8B"><span class="toc-number">5.23.</span> <span class="toc-text">23.面试官：了解过vue中的diff算法吗？说说看</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#24-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9AVue%E9%A1%B9%E7%9B%AE%E4%B8%AD%E6%9C%89%E5%B0%81%E8%A3%85%E8%BF%87axios%E5%90%97%EF%BC%9F%E6%80%8E%E4%B9%88%E5%B0%81%E8%A3%85%E7%9A%84%EF%BC%9F"><span class="toc-number">5.24.</span> <span class="toc-text">24.面试官：Vue项目中有封装过axios吗？怎么封装的？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#25-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E4%BD%A0%E4%BA%86%E8%A7%A3Axios%E7%9A%84%E5%8E%9F%E7%90%86%E5%90%97%EF%BC%9F%E6%9C%89%E7%9C%8B%E8%BF%87%E5%AE%83%E7%9A%84%E6%BA%90%E7%A0%81%E5%90%97%EF%BC%9F"><span class="toc-number">5.25.</span> <span class="toc-text">25.面试官：你了解Axios的原理吗？有看过它的源码吗？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#26-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9ASSR%E8%A7%A3%E5%86%B3%E4%BA%86%E4%BB%80%E4%B9%88%E9%97%AE%E9%A2%98%EF%BC%9F%E6%9C%89%E5%81%9A%E8%BF%87SSR%E5%90%97%EF%BC%9F%E4%BD%A0%E6%98%AF%E6%80%8E%E4%B9%88%E5%81%9A%E7%9A%84%EF%BC%9F"><span class="toc-number">5.26.</span> <span class="toc-text">26.面试官：SSR解决了什么问题？有做过SSR吗？你是怎么做的？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#27-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E4%B8%8B%E4%BD%A0%E7%9A%84Vue%E9%A1%B9%E7%9B%AE%E7%9A%84%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84%EF%BC%8C%E5%A6%82%E6%9E%9C%E6%98%AF%E5%A4%A7%E5%9E%8B%E9%A1%B9%E7%9B%AE%E4%BD%A0%E8%AF%A5%E6%80%8E%E4%B9%88%E5%88%92%E5%88%86%E7%BB%93%E6%9E%84%E5%92%8C%E5%88%92%E5%88%86%E7%BB%84%E4%BB%B6%E5%91%A2%EF%BC%9F"><span class="toc-number">5.27.</span> <span class="toc-text">27.面试官：说下你的Vue项目的目录结构，如果是大型项目你该怎么划分结构和划分组件呢？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#28-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9AVue%E8%A6%81%E5%81%9A%E6%9D%83%E9%99%90%E7%AE%A1%E7%90%86%E8%AF%A5%E6%80%8E%E4%B9%88%E5%81%9A%EF%BC%9F%E6%8E%A7%E5%88%B6%E5%88%B0%E6%8C%89%E9%92%AE%E7%BA%A7%E5%88%AB%E7%9A%84%E6%9D%83%E9%99%90%E6%80%8E%E4%B9%88%E5%81%9A%EF%BC%9F"><span class="toc-number">5.28.</span> <span class="toc-text">28.面试官：Vue要做权限管理该怎么做？控制到按钮级别的权限怎么做？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#29-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%B7%A8%E5%9F%9F%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9FVue%E9%A1%B9%E7%9B%AE%E4%B8%AD%E4%BD%A0%E6%98%AF%E5%A6%82%E4%BD%95%E8%A7%A3%E5%86%B3%E8%B7%A8%E5%9F%9F%E7%9A%84%E5%91%A2%EF%BC%9F"><span class="toc-number">5.29.</span> <span class="toc-text">29.面试官：跨域是什么？Vue项目中你是如何解决跨域的呢？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#30-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9AVue%E9%A1%B9%E7%9B%AE%E5%A6%82%E4%BD%95%E9%83%A8%E7%BD%B2%EF%BC%9F%E6%9C%89%E9%81%87%E5%88%B0%E5%B8%83%E7%BD%B2%E6%9C%8D%E5%8A%A1%E5%99%A8%E5%90%8E%E5%88%B7%E6%96%B0404%E9%97%AE%E9%A2%98%E5%90%97%EF%BC%9F"><span class="toc-number">5.30.</span> <span class="toc-text">30.面试官：Vue项目如何部署？有遇到布署服务器后刷新404问题吗？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#31-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E4%BD%A0%E6%98%AF%E6%80%8E%E4%B9%88%E5%A4%84%E7%90%86vue%E9%A1%B9%E7%9B%AE%E4%B8%AD%E7%9A%84%E9%94%99%E8%AF%AF%E7%9A%84%EF%BC%9F"><span class="toc-number">5.31.</span> <span class="toc-text">31.面试官：你是怎么处理vue项目中的错误的？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#32-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9AVue3%E6%9C%89%E4%BA%86%E8%A7%A3%E8%BF%87%E5%90%97%EF%BC%9F%E8%83%BD%E8%AF%B4%E8%AF%B4%E8%B7%9FVue2%E7%9A%84%E5%8C%BA%E5%88%AB%E5%90%97%EF%BC%9F"><span class="toc-number">5.32.</span> <span class="toc-text">32.面试官：Vue3有了解过吗？能说说跟Vue2的区别吗？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#33-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A-%E5%BD%93%E6%96%B0%E5%85%A5%E8%81%8C%E4%B8%80%E5%AE%B6%E5%85%AC%E5%8F%B8%E6%97%B6%EF%BC%8C%E5%A6%82%E4%BD%95%E5%BF%AB%E9%80%9F%E6%90%AD%E5%BB%BA%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E5%B9%B6%E8%AE%A9%E5%BA%94%E7%94%A8%E8%B7%91%E8%B5%B7%E6%9D%A5"><span class="toc-number">5.33.</span> <span class="toc-text">33.面试官： 当新入职一家公司时，如何快速搭建开发环境并让应用跑起来</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#34-npm-run-dev-%E4%B8%8E-npm-start-%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">5.34.</span> <span class="toc-text">34.npm run dev 与 npm start 的区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#35-react-%E4%B8%8E-vue-%E6%95%B0%E7%BB%84%E4%B8%AD-key-%E7%9A%84%E4%BD%9C%E7%94%A8%E6%98%AF%E4%BB%80%E4%B9%88"><span class="toc-number">5.35.</span> <span class="toc-text">35.react 与 vue 数组中 key 的作用是什么</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#36-vue-%E4%B8%AD-v-if-%E5%92%8C-v-show-%E7%9A%84%E5%8C%BA%E5%88%AB%E6%98%AF%E4%BB%80%E4%B9%88"><span class="toc-number">5.36.</span> <span class="toc-text">36.vue 中 v-if 和 v-show 的区别是什么</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#37-vue-%E4%B8%AD-computed-%E7%9A%84%E5%8E%9F%E7%90%86%E6%98%AF%E4%BB%80%E4%B9%88"><span class="toc-number">5.37.</span> <span class="toc-text">37.vue 中 computed 的原理是什么</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#38-vue-loader-%E7%9A%84%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%E6%98%AF%E4%BB%80%E4%B9%88"><span class="toc-number">5.38.</span> <span class="toc-text">38.vue-loader 的实现原理是什么</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#39-%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8-react-vue-%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA-message-API"><span class="toc-number">5.39.</span> <span class="toc-text">39.如何使用 react&#x2F;vue 实现一个 message API</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#40-%E5%A6%82%E6%9E%9C%E4%BD%BF%E7%94%A8-SSR%EF%BC%8C%E5%8F%AF%E4%BB%A5%E5%9C%A8-created-componentWillMount-%E4%B8%AD%E8%AE%BF%E9%97%AE-localStorage-%E5%90%97"><span class="toc-number">5.40.</span> <span class="toc-text">40.如果使用 SSR，可以在 created&#x2F;componentWillMount 中访问 localStorage 吗</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#41-%E5%9C%A8-react-vue-%E4%B8%AD%E6%95%B0%E7%BB%84%E6%98%AF%E5%90%A6%E5%8F%AF%E4%BB%A5%E4%BB%A5%E5%9C%A8%E6%95%B0%E7%BB%84%E4%B8%AD%E7%9A%84%E6%AC%A1%E5%BA%8F%E4%B8%BA-key"><span class="toc-number">5.41.</span> <span class="toc-text">41.在 react&#x2F;vue 中数组是否可以以在数组中的次序为 key</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#42-%E5%A6%82%E4%BD%95%E8%AE%BE%E8%AE%A1%E4%B8%80%E4%B8%AA-UI-%E7%BB%84%E4%BB%B6%E5%BA%93"><span class="toc-number">5.42.</span> <span class="toc-text">42.如何设计一个 UI 组件库</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#43-Vue-%E4%B8%AD-nextTick-%E7%9A%84%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%E6%98%AF%E4%BB%80%E4%B9%88"><span class="toc-number">5.43.</span> <span class="toc-text">43.Vue 中 nextTick 的实现原理是什么</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#44-%E7%8E%B0%E4%BB%A3%E6%A1%86%E6%9E%B6%E5%A6%82-React%E3%80%81Vue-%E7%9B%B8%E6%AF%94%E5%8E%9F%E7%94%9F%E5%BC%80%E5%8F%91%E6%9C%89%E4%BB%80%E4%B9%88%E4%BC%98%E5%8A%BF"><span class="toc-number">5.44.</span> <span class="toc-text">44.现代框架如 React、Vue 相比原生开发有什么优势</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#45-React-Vue-%E4%B8%AD%E7%9A%84-router-%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%E5%A6%82%E4%BD%95"><span class="toc-number">5.45.</span> <span class="toc-text">45.React&#x2F;Vue 中的 router 实现原理如何</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#45-1-history-API"><span class="toc-number">5.45.1.</span> <span class="toc-text">45.1 history API</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#45-2-hash"><span class="toc-number">5.45.2.</span> <span class="toc-text">45.2 hash</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#46-%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE%E4%B8%AD%E6%9C%89%E5%93%AA%E4%BA%9B%E5%89%AF%E4%BD%9C%E7%94%A8"><span class="toc-number">5.46.</span> <span class="toc-text">46.前端项目中有哪些副作用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#47-React-Vue-%E4%B8%AD%E5%8F%97%E6%8E%A7%E7%BB%84%E4%BB%B6%E4%B8%8E%E4%B8%8D%E5%8F%97%E6%8E%A7%E7%BB%84%E4%BB%B6%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">5.47.</span> <span class="toc-text">47.React&#x2F;Vue 中受控组件与不受控组件的区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#48-React-Vue-%E4%B8%AD%E5%85%84%E5%BC%9F%E7%BB%84%E4%BB%B6%E5%A6%82%E4%BD%95%E8%BF%9B%E8%A1%8C%E9%80%9A%E4%BF%A1"><span class="toc-number">5.48.</span> <span class="toc-text">48.React&#x2F;Vue 中兄弟组件如何进行通信</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#49-%E5%9C%A8%E8%99%9A%E6%8B%9F-DOM-%E4%B8%AD%E8%BF%9B%E8%A1%8C-diff-%E7%AE%97%E6%B3%95%E6%97%B6%EF%BC%8C%E4%BB%8B%E7%BB%8D%E5%BD%93%E6%A0%B9%E6%8D%AE-key-%E5%AF%B9%E6%95%B0%E7%BB%84%E8%BF%9B%E8%A1%8C%E9%87%8D%E7%94%A8%E6%97%B6%E7%9A%84%E7%AE%97%E6%B3%95"><span class="toc-number">5.49.</span> <span class="toc-text">49.在虚拟 DOM 中进行 diff 算法时，介绍当根据 key 对数组进行重用时的算法</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#Vue3%E7%B3%BB%E5%88%97-%E5%85%B18%E9%A2%98"><span class="toc-number">6.</span> <span class="toc-text">Vue3系列 共8题</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9AVue3-0%E7%9A%84%E8%AE%BE%E8%AE%A1%E7%9B%AE%E6%A0%87%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F%E5%81%9A%E4%BA%86%E5%93%AA%E4%BA%9B%E4%BC%98%E5%8C%96"><span class="toc-number">6.1.</span> <span class="toc-text">1.面试官：Vue3.0的设计目标是什么？做了哪些优化?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9AVue3-0-%E6%80%A7%E8%83%BD%E6%8F%90%E5%8D%87%E4%B8%BB%E8%A6%81%E6%98%AF%E9%80%9A%E8%BF%87%E5%93%AA%E5%87%A0%E6%96%B9%E9%9D%A2%E4%BD%93%E7%8E%B0%E7%9A%84%EF%BC%9F"><span class="toc-number">6.2.</span> <span class="toc-text">2.面试官：Vue3.0 性能提升主要是通过哪几方面体现的？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9AVue3-0%E9%87%8C%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E7%94%A8-Proxy-API-%E6%9B%BF%E4%BB%A3-defineProperty-API-%EF%BC%9F"><span class="toc-number">6.3.</span> <span class="toc-text">3.面试官：Vue3.0里为什么要用 Proxy API 替代 defineProperty API ？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9AVue3-0-%E6%89%80%E9%87%87%E7%94%A8%E7%9A%84-Composition-Api-%E4%B8%8E-Vue2-x-%E4%BD%BF%E7%94%A8%E7%9A%84-Options-Api-%E6%9C%89%E4%BB%80%E4%B9%88%E4%B8%8D%E5%90%8C%EF%BC%9F"><span class="toc-number">6.4.</span> <span class="toc-text">4.面试官：Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4Vue-3-0%E4%B8%ADTreeshaking%E7%89%B9%E6%80%A7%EF%BC%9F%E4%B8%BE%E4%BE%8B%E8%AF%B4%E6%98%8E%E4%B8%80%E4%B8%8B%EF%BC%9F"><span class="toc-number">6.5.</span> <span class="toc-text">5.面试官：说说Vue 3.0中Treeshaking特性？举例说明一下？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E7%94%A8Vue3-0-%E5%86%99%E8%BF%87%E7%BB%84%E4%BB%B6%E5%90%97%EF%BC%9F%E5%A6%82%E6%9E%9C%E6%83%B3%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA-Modal%E4%BD%A0%E4%BC%9A%E6%80%8E%E4%B9%88%E8%AE%BE%E8%AE%A1%EF%BC%9F"><span class="toc-number">6.6.</span> <span class="toc-text">6.面试官：用Vue3.0 写过组件吗？如果想实现一个 Modal你会怎么设计？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#7-vue3-0-%E4%B8%AD%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E4%BD%BF%E7%94%A8-Proxy%EF%BC%8C%E5%AE%83%E7%9B%B8%E6%AF%94%E4%BB%A5%E5%89%8D%E7%9A%84%E5%AE%9E%E7%8E%B0%E6%96%B9%E5%BC%8F%E6%9C%89%E4%BB%80%E4%B9%88%E6%94%B9%E8%BF%9B"><span class="toc-number">6.7.</span> <span class="toc-text">7.vue3.0 中为什么要使用 Proxy，它相比以前的实现方式有什么改进</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#8-vue3-%E4%B8%AD%EF%BC%8C%E5%A6%82%E4%BD%95%E7%9B%91%E5%90%AC%E6%95%B0%E7%BB%84%E7%9A%84%E5%8F%98%E5%8C%96"><span class="toc-number">6.8.</span> <span class="toc-text">8.vue3 中，如何监听数组的变化</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#ES6%E7%B3%BB%E5%88%97-%E5%85%B110%E9%A2%98"><span class="toc-number">7.</span> <span class="toc-text">ES6系列 共10题</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4var%E3%80%81let%E3%80%81const%E4%B9%8B%E9%97%B4%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">7.1.</span> <span class="toc-text">1.面试官：说说var、let、const之间的区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9AES6%E4%B8%AD%E6%95%B0%E7%BB%84%E6%96%B0%E5%A2%9E%E4%BA%86%E5%93%AA%E4%BA%9B%E6%89%A9%E5%B1%95"><span class="toc-number">7.2.</span> <span class="toc-text">2.面试官：ES6中数组新增了哪些扩展?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9AES6%E4%B8%AD%E5%AF%B9%E8%B1%A1%E6%96%B0%E5%A2%9E%E4%BA%86%E5%93%AA%E4%BA%9B%E6%89%A9%E5%B1%95"><span class="toc-number">7.3.</span> <span class="toc-text">3.面试官：ES6中对象新增了哪些扩展?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9AES6%E4%B8%AD%E5%87%BD%E6%95%B0%E6%96%B0%E5%A2%9E%E4%BA%86%E5%93%AA%E4%BA%9B%E6%89%A9%E5%B1%95"><span class="toc-number">7.4.</span> <span class="toc-text">4.面试官：ES6中函数新增了哪些扩展?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9AES6%E4%B8%AD%E6%96%B0%E5%A2%9E%E7%9A%84Set%E3%80%81Map%E4%B8%A4%E7%A7%8D%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E6%80%8E%E4%B9%88%E7%90%86%E8%A7%A3"><span class="toc-number">7.5.</span> <span class="toc-text">5.面试官：ES6中新增的Set、Map两种数据结构怎么理解?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E4%BD%A0%E6%98%AF%E6%80%8E%E4%B9%88%E7%90%86%E8%A7%A3ES6%E4%B8%AD-Promise%E7%9A%84%EF%BC%9F%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF%EF%BC%9F"><span class="toc-number">7.6.</span> <span class="toc-text">6.面试官：你是怎么理解ES6中 Promise的？使用场景？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#7-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E6%80%8E%E4%B9%88%E7%90%86%E8%A7%A3ES6%E4%B8%AD-Generator%E7%9A%84%EF%BC%9F%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF%EF%BC%9F"><span class="toc-number">7.7.</span> <span class="toc-text">7.面试官：怎么理解ES6中 Generator的？使用场景？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#8-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E4%BD%A0%E6%98%AF%E6%80%8E%E4%B9%88%E7%90%86%E8%A7%A3ES6%E4%B8%ADProxy%E7%9A%84%EF%BC%9F%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF"><span class="toc-number">7.8.</span> <span class="toc-text">8.面试官：你是怎么理解ES6中Proxy的？使用场景?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#9-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E4%BD%A0%E6%98%AF%E6%80%8E%E4%B9%88%E7%90%86%E8%A7%A3ES6%E4%B8%ADModule%E7%9A%84%EF%BC%9F%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF%EF%BC%9F"><span class="toc-number">7.9.</span> <span class="toc-text">9.面试官：你是怎么理解ES6中Module的？使用场景？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#10-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E4%BD%A0%E6%98%AF%E6%80%8E%E4%B9%88%E7%90%86%E8%A7%A3ES6%E4%B8%AD-Decorator-%E7%9A%84%EF%BC%9F%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF%EF%BC%9F-opens-new-window"><span class="toc-number">7.10.</span> <span class="toc-text">10.面试官：你是怎么理解ES6中 Decorator 的？使用场景？(opens new window)</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#webpack%E7%B3%BB%E5%88%97-%E5%85%B110%E9%A2%98"><span class="toc-number">8.</span> <span class="toc-text">webpack系列 共10题</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9webpack%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E8%A7%A3%E5%86%B3%E4%BA%86%E4%BB%80%E4%B9%88%E9%97%AE%E9%A2%98%EF%BC%9F-opens-new-window"><span class="toc-number">8.1.</span> <span class="toc-text">1.面试官：说说你对webpack的理解？解决了什么问题？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4webpack%E7%9A%84%E6%9E%84%E5%BB%BA%E6%B5%81%E7%A8%8B-opens-new-window"><span class="toc-number">8.2.</span> <span class="toc-text">2.面试官：说说webpack的构建流程?(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4webpack%E4%B8%AD%E5%B8%B8%E8%A7%81%E7%9A%84Loader%EF%BC%9F%E8%A7%A3%E5%86%B3%E4%BA%86%E4%BB%80%E4%B9%88%E9%97%AE%E9%A2%98%EF%BC%9F-opens-new-window"><span class="toc-number">8.3.</span> <span class="toc-text">3.面试官：说说webpack中常见的Loader？解决了什么问题？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4webpack%E4%B8%AD%E5%B8%B8%E8%A7%81%E7%9A%84Plugin%EF%BC%9F%E8%A7%A3%E5%86%B3%E4%BA%86%E4%BB%80%E4%B9%88%E9%97%AE%E9%A2%98%EF%BC%9F-opens-new-window"><span class="toc-number">8.4.</span> <span class="toc-text">4.面试官：说说webpack中常见的Plugin？解决了什么问题？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4Loader%E5%92%8CPlugin%E7%9A%84%E5%8C%BA%E5%88%AB%EF%BC%9F%E7%BC%96%E5%86%99Loader%EF%BC%8CPlugin%E7%9A%84%E6%80%9D%E8%B7%AF%EF%BC%9F-opens-new-window"><span class="toc-number">8.5.</span> <span class="toc-text">5.面试官：说说Loader和Plugin的区别？编写Loader，Plugin的思路？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4webpack%E7%9A%84%E7%83%AD%E6%9B%B4%E6%96%B0%E6%98%AF%E5%A6%82%E4%BD%95%E5%81%9A%E5%88%B0%E7%9A%84%EF%BC%9F%E5%8E%9F%E7%90%86%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F-opens-new-window"><span class="toc-number">8.6.</span> <span class="toc-text">6.面试官：说说webpack的热更新是如何做到的？原理是什么？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#7-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4webpack-proxy%E5%B7%A5%E4%BD%9C%E5%8E%9F%E7%90%86%EF%BC%9F%E4%B8%BA%E4%BB%80%E4%B9%88%E8%83%BD%E8%A7%A3%E5%86%B3%E8%B7%A8%E5%9F%9F-opens-new-window"><span class="toc-number">8.7.</span> <span class="toc-text">7.面试官：说说webpack proxy工作原理？为什么能解决跨域?(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#8-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E5%A6%82%E4%BD%95%E5%80%9F%E5%8A%A9webpack%E6%9D%A5%E4%BC%98%E5%8C%96%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%EF%BC%9F-opens-new-window"><span class="toc-number">8.8.</span> <span class="toc-text">8.面试官：说说如何借助webpack来优化前端性能？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#9-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E5%A6%82%E4%BD%95%E6%8F%90%E9%AB%98webpack%E7%9A%84%E6%9E%84%E5%BB%BA%E9%80%9F%E5%BA%A6%EF%BC%9F-opens-new-window"><span class="toc-number">8.9.</span> <span class="toc-text">9.面试官：如何提高webpack的构建速度？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#10-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E4%B8%8Ewebpack%E7%B1%BB%E4%BC%BC%E7%9A%84%E5%B7%A5%E5%85%B7%E8%BF%98%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F%E5%8C%BA%E5%88%AB%EF%BC%9F-opens-new-window"><span class="toc-number">8.10.</span> <span class="toc-text">10.面试官：与webpack类似的工具还有哪些？区别？(opens new window)</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#HTTP%E7%B3%BB%E5%88%97"><span class="toc-number">9.</span> <span class="toc-text">HTTP系列</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E4%BB%80%E4%B9%88%E6%98%AFHTTP-HTTP-%E5%92%8C-HTTPS-%E7%9A%84%E5%8C%BA%E5%88%AB-opens-new-window"><span class="toc-number">9.1.</span> <span class="toc-text">1.面试官：什么是HTTP? HTTP 和 HTTPS 的区别?(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E4%B8%BA%E4%BB%80%E4%B9%88%E8%AF%B4HTTPS%E6%AF%94HTTP%E5%AE%89%E5%85%A8-HTTPS%E6%98%AF%E5%A6%82%E4%BD%95%E4%BF%9D%E8%AF%81%E5%AE%89%E5%85%A8%E7%9A%84%EF%BC%9F-opens-new-window"><span class="toc-number">9.2.</span> <span class="toc-text">2.面试官：为什么说HTTPS比HTTP安全? HTTPS是如何保证安全的？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E5%A6%82%E4%BD%95%E7%90%86%E8%A7%A3UDP-%E5%92%8C-TCP-%E5%8C%BA%E5%88%AB-%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF-opens-new-window"><span class="toc-number">9.3.</span> <span class="toc-text">3.面试官：如何理解UDP 和 TCP? 区别? 应用场景?(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E5%A6%82%E4%BD%95%E7%90%86%E8%A7%A3OSI%E4%B8%83%E5%B1%82%E6%A8%A1%E5%9E%8B-opens-new-window"><span class="toc-number">9.4.</span> <span class="toc-text">4.面试官：如何理解OSI七层模型?(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E5%A6%82%E4%BD%95%E7%90%86%E8%A7%A3TCP-IP%E5%8D%8F%E8%AE%AE-opens-new-window"><span class="toc-number">9.5.</span> <span class="toc-text">5.面试官：如何理解TCP&#x2F;IP协议?(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9ADNS%E5%8D%8F%E8%AE%AE-%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F%E8%AF%B4%E8%AF%B4DNS-%E5%AE%8C%E6%95%B4%E7%9A%84%E6%9F%A5%E8%AF%A2%E8%BF%87%E7%A8%8B-opens-new-window"><span class="toc-number">9.6.</span> <span class="toc-text">6.面试官：DNS协议 是什么？说说DNS 完整的查询过程?(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#7-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E5%A6%82%E4%BD%95%E7%90%86%E8%A7%A3CDN%EF%BC%9F%E8%AF%B4%E8%AF%B4%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%EF%BC%9F-opens-new-window"><span class="toc-number">9.7.</span> <span class="toc-text">7.面试官：如何理解CDN？说说实现原理？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#8-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4-HTTP1-0-1-1-2-0-%E7%9A%84%E5%8C%BA%E5%88%AB-opens-new-window"><span class="toc-number">9.8.</span> <span class="toc-text">8.面试官：说说 HTTP1.0&#x2F;1.1&#x2F;2.0 的区别?(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#9-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4HTTP-%E5%B8%B8%E8%A7%81%E7%9A%84%E7%8A%B6%E6%80%81%E7%A0%81%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%8C%E9%80%82%E7%94%A8%E5%9C%BA%E6%99%AF%EF%BC%9F-opens-new-window"><span class="toc-number">9.9.</span> <span class="toc-text">9.面试官：说说HTTP 常见的状态码有哪些，适用场景？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#10-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E4%B8%80%E4%B8%8B-GET-%E5%92%8C-POST-%E7%9A%84%E5%8C%BA%E5%88%AB%EF%BC%9F-opens-new-window"><span class="toc-number">9.10.</span> <span class="toc-text">10.面试官：说一下 GET 和 POST 的区别？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#11-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4-HTTP-%E5%B8%B8%E8%A7%81%E7%9A%84%E8%AF%B7%E6%B1%82%E5%A4%B4%E6%9C%89%E5%93%AA%E4%BA%9B-%E4%BD%9C%E7%94%A8%EF%BC%9F-opens-new-window"><span class="toc-number">9.11.</span> <span class="toc-text">11.面试官：说说 HTTP 常见的请求头有哪些? 作用？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#12-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E5%9C%B0%E5%9D%80%E6%A0%8F%E8%BE%93%E5%85%A5-URL-%E6%95%B2%E4%B8%8B%E5%9B%9E%E8%BD%A6%E5%90%8E%E5%8F%91%E7%94%9F%E4%BA%86%E4%BB%80%E4%B9%88%EF%BC%9F-opens-new-window"><span class="toc-number">9.12.</span> <span class="toc-text">12.面试官：说说地址栏输入 URL 敲下回车后发生了什么？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#13-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4TCP%E4%B8%BA%E4%BB%80%E4%B9%88%E9%9C%80%E8%A6%81%E4%B8%89%E6%AC%A1%E6%8F%A1%E6%89%8B%E5%92%8C%E5%9B%9B%E6%AC%A1%E6%8C%A5%E6%89%8B%EF%BC%9F-opens-new-window"><span class="toc-number">9.13.</span> <span class="toc-text">13.面试官：说说TCP为什么需要三次握手和四次挥手？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#14-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E5%AF%B9WebSocket%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF%EF%BC%9F-opens-new-window"><span class="toc-number">9.14.</span> <span class="toc-text">14.面试官：说说对WebSocket的理解？应用场景？(opens new window)</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#NodeJS%E7%B3%BB%E5%88%97-%E5%85%B163%E9%A2%98"><span class="toc-number">10.</span> <span class="toc-text">NodeJS系列 共63题</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9Node-js-%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E4%BC%98%E7%BC%BA%E7%82%B9%EF%BC%9F%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF%EF%BC%9F-opens-new-window"><span class="toc-number">10.1.</span> <span class="toc-text">1.面试官：说说你对Node.js 的理解？优缺点？应用场景？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4-Node-js-%E6%9C%89%E5%93%AA%E4%BA%9B%E5%85%A8%E5%B1%80%E5%AF%B9%E8%B1%A1%EF%BC%9F-opens-new-window"><span class="toc-number">10.2.</span> <span class="toc-text">2.面试官：说说 Node. js 有哪些全局对象？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E5%AF%B9-Node-%E4%B8%AD%E7%9A%84-process-%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E6%9C%89%E5%93%AA%E4%BA%9B%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95%EF%BC%9F-opens-new-window"><span class="toc-number">10.3.</span> <span class="toc-text">3.面试官：说说对 Node 中的 process 的理解？有哪些常用方法？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E5%AF%B9-Node-%E4%B8%AD%E7%9A%84-fs%E6%A8%A1%E5%9D%97%E7%9A%84%E7%90%86%E8%A7%A3-%E6%9C%89%E5%93%AA%E4%BA%9B%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95-opens-new-window"><span class="toc-number">10.4.</span> <span class="toc-text">4.面试官：说说对 Node 中的 fs模块的理解? 有哪些常用方法(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E5%AF%B9-Node-%E4%B8%AD%E7%9A%84-Buffer-%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF%EF%BC%9F-opens-new-window"><span class="toc-number">10.5.</span> <span class="toc-text">5.面试官：说说对 Node 中的 Buffer 的理解？应用场景？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E5%AF%B9-Node-%E4%B8%AD%E7%9A%84-Stream-%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF%EF%BC%9F-opens-new-window"><span class="toc-number">10.6.</span> <span class="toc-text">6.面试官：说说对 Node 中的 Stream 的理解？应用场景？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#7-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4Node%E4%B8%AD%E7%9A%84EventEmitter-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AAEventEmitter-opens-new-window"><span class="toc-number">10.7.</span> <span class="toc-text">7.面试官：说说Node中的EventEmitter? 如何实现一个EventEmitter?(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#8-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E5%AF%B9Nodejs%E4%B8%AD%E7%9A%84%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF%E6%9C%BA%E5%88%B6%E7%90%86%E8%A7%A3-opens-new-window"><span class="toc-number">10.8.</span> <span class="toc-text">8.面试官：说说对Nodejs中的事件循环机制理解?(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#9-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4-Node-%E6%96%87%E4%BB%B6%E6%9F%A5%E6%89%BE%E7%9A%84%E4%BC%98%E5%85%88%E7%BA%A7%E4%BB%A5%E5%8F%8A-Require-%E6%96%B9%E6%B3%95%E7%9A%84%E6%96%87%E4%BB%B6%E6%9F%A5%E6%89%BE%E7%AD%96%E7%95%A5-opens-new-window"><span class="toc-number">10.9.</span> <span class="toc-text">9.面试官：说说 Node 文件查找的优先级以及 Require 方法的文件查找策略?(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#10-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E5%AF%B9%E4%B8%AD%E9%97%B4%E4%BB%B6%E6%A6%82%E5%BF%B5%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%8C%E5%A6%82%E4%BD%95%E5%B0%81%E8%A3%85-node-%E4%B8%AD%E9%97%B4%E4%BB%B6%EF%BC%9F-opens-new-window"><span class="toc-number">10.10.</span> <span class="toc-text">10.面试官：说说对中间件概念的理解，如何封装 node 中间件？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#11-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0jwt%E9%89%B4%E6%9D%83%E6%9C%BA%E5%88%B6%EF%BC%9F%E8%AF%B4%E8%AF%B4%E4%BD%A0%E7%9A%84%E6%80%9D%E8%B7%AF-opens-new-window"><span class="toc-number">10.11.</span> <span class="toc-text">11.面试官：如何实现jwt鉴权机制？说说你的思路(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#12-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0%EF%BC%9F%E8%AF%B4%E8%AF%B4%E4%BD%A0%E7%9A%84%E6%80%9D%E8%B7%AF-opens-new-window"><span class="toc-number">10.12.</span> <span class="toc-text">12.面试官：如何实现文件上传？说说你的思路(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#13-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E5%A6%82%E6%9E%9C%E8%AE%A9%E4%BD%A0%E6%9D%A5%E8%AE%BE%E8%AE%A1%E4%B8%80%E4%B8%AA%E5%88%86%E9%A1%B5%E5%8A%9F%E8%83%BD-%E4%BD%A0%E4%BC%9A%E6%80%8E%E4%B9%88%E8%AE%BE%E8%AE%A1-%E5%89%8D%E5%90%8E%E7%AB%AF%E5%A6%82%E4%BD%95%E4%BA%A4%E4%BA%92-opens-new-window"><span class="toc-number">10.13.</span> <span class="toc-text">13.面试官：如果让你来设计一个分页功能, 你会怎么设计? 前后端如何交互?(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#14-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9ANode%E6%80%A7%E8%83%BD%E5%A6%82%E4%BD%95%E8%BF%9B%E8%A1%8C%E7%9B%91%E6%8E%A7%E4%BB%A5%E5%8F%8A%E4%BC%98%E5%8C%96%EF%BC%9F-opens-new-window"><span class="toc-number">10.14.</span> <span class="toc-text">14.面试官：Node性能如何进行监控以及优化？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#15-%E6%9C%89%E6%B2%A1%E6%9C%89%E8%AF%BB%E8%BF%87-koa-%E7%9A%84%E6%BA%90%E7%A0%81%EF%BC%8C%E4%BB%80%E4%B9%88%E6%98%AF%E6%B4%8B%E8%91%B1%E6%A8%A1%E5%9E%8B%E5%91%A2"><span class="toc-number">10.15.</span> <span class="toc-text">15.有没有读过 koa 的源码，什么是洋葱模型呢</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#16-%E5%A6%82%E4%BD%95%E7%9B%91%E6%8E%A7%E6%96%87%E4%BB%B6%E7%9A%84%E5%8F%98%E5%8A%A8"><span class="toc-number">10.16.</span> <span class="toc-text">16.如何监控文件的变动</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#17-%E5%9C%A8-Node-%E5%BA%94%E7%94%A8%E4%B8%AD%E5%A6%82%E4%BD%95%E5%88%A9%E7%94%A8%E5%A4%9A%E6%A0%B8%E5%BF%83-CPU-%E7%9A%84%E4%BC%98%E5%8A%BF"><span class="toc-number">10.17.</span> <span class="toc-text">17.在 Node 应用中如何利用多核心 CPU 的优势</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#18-Node-%E4%B8%AD-cluster-%E7%9A%84%E5%8E%9F%E7%90%86%E6%98%AF%E4%BB%80%E4%B9%88"><span class="toc-number">10.18.</span> <span class="toc-text">18.Node 中 cluster 的原理是什么</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#19-Node-%E4%B8%AD%E5%A6%82%E4%BD%95%E5%88%A4%E6%96%AD%E4%B8%80%E4%B8%AA%E8%B7%AF%E5%BE%84%E6%98%AF%E6%96%87%E4%BB%B6%E8%BF%98%E6%98%AF%E6%96%87%E4%BB%B6%E5%A4%B9"><span class="toc-number">10.19.</span> <span class="toc-text">19.Node 中如何判断一个路径是文件还是文件夹</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#20-%E4%BB%A5%E4%B8%8B%E4%BB%A3%E7%A0%81%EF%BC%8Ckoa-%E4%BC%9A%E8%BF%94%E5%9B%9E%E4%BB%80%E4%B9%88%E6%95%B0%E6%8D%AE"><span class="toc-number">10.20.</span> <span class="toc-text">20.以下代码，koa 会返回什么数据</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#21-Node-%E5%A6%82%E4%BD%95%E8%BF%9B%E8%A1%8C%E8%BF%9B%E7%A8%8B%E9%97%B4%E9%80%9A%E4%BF%A1"><span class="toc-number">10.21.</span> <span class="toc-text">21.Node 如何进行进程间通信</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#22-%E6%9C%89%E6%B2%A1%E6%9C%89%E7%94%A8%E8%BF%87-continuous-local-storage%EF%BC%8C%E7%94%A8%E5%9C%A8%E4%BA%86%E5%93%AA%E9%87%8C"><span class="toc-number">10.22.</span> <span class="toc-text">22.有没有用过 continuous local storage，用在了哪里</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#23-Promise-%E5%9C%A8%E5%BC%82%E6%AD%A5%E8%B5%84%E6%BA%90%E7%9A%84%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F-async-hooks-%E4%B8%AD%E6%98%AF%E5%A6%82%E4%BD%95%E8%A2%AB%E9%94%80%E6%AF%81%E7%9A%84"><span class="toc-number">10.23.</span> <span class="toc-text">23.Promise 在异步资源的生命周期 (async_hooks) 中是如何被销毁的</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#24-%E5%9C%A8-node-%E4%B8%AD%E5%A6%82%E4%BD%95%E7%9B%91%E5%90%AC%E5%BC%82%E6%AD%A5%E8%B5%84%E6%BA%90%E7%9A%84%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F"><span class="toc-number">10.24.</span> <span class="toc-text">24.在 node 中如何监听异步资源的生命周期</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#25-%E6%B5%8B%E8%AF%95%E4%B8%AD-TDD-%E4%B8%8E-BDD-%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB"><span class="toc-number">10.25.</span> <span class="toc-text">25.测试中 TDD 与 BDD 有什么区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#26-node-%E2%80%94max-old-space-size-4096-%E6%98%AF%E4%BB%80%E4%B9%88%E6%84%8F%E6%80%9D"><span class="toc-number">10.26.</span> <span class="toc-text">26.node —max-old-space-size&#x3D;4096 是什么意思</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#27-%E5%A6%82%E4%BD%95%E7%90%86%E8%A7%A3-Node-%E7%9A%84%E5%BC%82%E6%AD%A5%E9%9D%9E%E9%98%BB%E5%A1%9E-IO"><span class="toc-number">10.27.</span> <span class="toc-text">27.如何理解 Node 的异步非阻塞 IO</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#28-%E5%BD%93-Node-%E5%BA%94%E7%94%A8%E5%8F%91%E7%94%9F-gc-%E6%97%B6%EF%BC%8C%E5%A6%82%E4%BD%95%E7%9B%91%E6%8E%A7"><span class="toc-number">10.28.</span> <span class="toc-text">28.当 Node 应用发生 gc 时，如何监控</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#30-Node-%E5%BA%94%E7%94%A8%E4%B8%AD%E5%A6%82%E4%BD%95%E6%9F%A5%E7%9C%8B-gc-%E7%9A%84%E6%97%A5%E5%BF%97"><span class="toc-number">10.29.</span> <span class="toc-text">30.Node 应用中如何查看 gc 的日志</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#31-%E5%A6%82%E4%BD%95%E8%8E%B7%E5%8F%96%E4%BD%A0%E4%BB%AC-Node-%E9%A1%B9%E7%9B%AE%E7%9A%84-cpu-profile-%E5%BF%AB%E7%85%A7"><span class="toc-number">10.30.</span> <span class="toc-text">31.如何获取你们 Node 项目的 cpu profile 快照</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#32-Node-%E4%B8%AD%E5%BE%AA%E7%8E%AF%E5%BC%95%E7%94%A8%E4%BC%9A%E5%8F%91%E7%94%9F%E4%BB%80%E4%B9%88"><span class="toc-number">10.31.</span> <span class="toc-text">32.Node 中循环引用会发生什么</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#33-Node-%E4%B8%AD-require-%E6%97%B6%E5%8F%91%E7%94%9F%E4%BA%86%E4%BB%80%E4%B9%88"><span class="toc-number">10.32.</span> <span class="toc-text">33.Node 中 require 时发生了什么</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#34-%E7%AE%80%E8%BF%B0-node-v8-%E4%B8%AD%E7%9A%84%E5%9E%83%E5%9C%BE%E5%9B%9E%E6%94%B6%E6%9C%BA%E5%88%B6"><span class="toc-number">10.33.</span> <span class="toc-text">34.简述 node&#x2F;v8 中的垃圾回收机制</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#35-node-%E4%B8%AD-exec%EF%BC%8Cfork-%E4%B8%8E-spawn-%E6%9C%89%E4%BD%95%E5%8C%BA%E5%88%AB"><span class="toc-number">10.34.</span> <span class="toc-text">35.node 中 exec，fork 与 spawn 有何区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#36-node-%E4%B8%AD-dns-resolve-%E5%8F%8A-dns-lookup-%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB"><span class="toc-number">10.35.</span> <span class="toc-text">36.node 中 dns.resolve 及 dns.lookup 有什么区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#37-Node-%E4%B8%AD-require-json-%E6%96%87%E4%BB%B6%E6%95%B0%E6%8D%AE%E6%97%B6%EF%BC%8C%E5%A6%82%E4%BD%95%E5%BD%93%E6%96%87%E4%BB%B6%E6%9B%B4%E6%96%B0%E6%97%B6%EF%BC%8C%E9%87%8D%E6%96%B0-require"><span class="toc-number">10.36.</span> <span class="toc-text">37.Node 中 require json 文件数据时，如何当文件更新时，重新 require</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#38-node-%E4%B8%AD%E5%A6%82%E4%BD%95%E6%9F%A5%E7%9C%8B%E5%87%BD%E6%95%B0%E5%BC%82%E6%AD%A5%E8%B0%83%E7%94%A8%E6%A0%88"><span class="toc-number">10.37.</span> <span class="toc-text">38.node 中如何查看函数异步调用栈</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#39-%E6%9C%89%E6%B2%A1%E6%9C%89%E6%8E%A5%E8%A7%A6%E8%BF%87-fs-extra%EF%BC%8C%E5%AE%83%E6%98%AF%E8%A7%A3%E5%86%B3%E4%BB%80%E4%B9%88%E9%97%AE%E9%A2%98%E7%9A%84"><span class="toc-number">10.38.</span> <span class="toc-text">39.有没有接触过 fs-extra，它是解决什么问题的</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#40-%E5%9C%A8-node-%E4%B8%AD%E5%A6%82%E4%BD%95%E5%BC%80%E5%90%AF-https"><span class="toc-number">10.39.</span> <span class="toc-text">40.在 node 中如何开启 https</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#41-node-%E4%B8%AD-module-exports-%E4%B8%8E-exports-%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB"><span class="toc-number">10.40.</span> <span class="toc-text">41.node 中 module.exports 与 exports 有什么区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#42-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA-timeout-%E7%9A%84%E4%B8%AD%E9%97%B4%E4%BB%B6"><span class="toc-number">10.41.</span> <span class="toc-text">42.如何实现一个 timeout 的中间件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#43-%E5%A6%82%E4%BD%95%E5%BE%97%E7%9F%A5%E7%9B%AE%E5%89%8D-node-%E7%89%88%E6%9C%AC%E7%9A%84-v8-%E7%89%88%E6%9C%AC%E5%8F%B7"><span class="toc-number">10.42.</span> <span class="toc-text">43.如何得知目前 node 版本的 v8 版本号</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#44-%E5%A6%82%E4%BD%95%E5%BE%97%E7%9F%A5%E7%9B%AE%E5%89%8D-node-%E7%89%88%E6%9C%AC%E7%9A%84-v8-%E7%89%88%E6%9C%AC%E5%8F%B7"><span class="toc-number">10.43.</span> <span class="toc-text">44.如何得知目前 node 版本的 v8 版本号</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#45-%E5%9C%A8-node-%E4%B8%AD%E5%A6%82%E4%BD%95%E5%88%A4%E6%96%AD%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1%E6%98%AF-stream"><span class="toc-number">10.44.</span> <span class="toc-text">45.在 node 中如何判断一个对象是 stream</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#46-%E5%9C%A8-node-%E7%AB%AF%E5%A6%82%E4%BD%95%E5%90%91%E6%9C%8D%E5%8A%A1%E5%99%A8%E4%B8%8A%E4%BC%A0%E6%96%87%E4%BB%B6"><span class="toc-number">10.45.</span> <span class="toc-text">46.在 node 端如何向服务器上传文件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#47-node-%E4%B8%AD-nextTick-%E4%B8%8E-setTimeout-%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB"><span class="toc-number">10.46.</span> <span class="toc-text">47.node 中 nextTick 与 setTimeout 有什么区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#48-%E5%A6%82%E4%BD%95%E5%9C%A8%E7%94%9F%E4%BA%A7%E7%8E%AF%E5%A2%83%E9%83%A8%E7%BD%B2%E4%B8%80%E4%B8%AA-Node-%E5%BA%94%E7%94%A8"><span class="toc-number">10.47.</span> <span class="toc-text">48.如何在生产环境部署一个 Node 应用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#49-express-%E4%B8%AD%E9%97%B4%E4%BB%B6%E7%9A%84%E5%8E%9F%E7%90%86%E6%98%AF%E4%BB%80%E4%B9%88"><span class="toc-number">10.48.</span> <span class="toc-text">49.express 中间件的原理是什么</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#50-%E5%A6%82%E4%BD%95%E6%A3%80%E6%B5%8B%E5%B9%B6%E9%81%BF%E5%85%8D%E5%BE%AA%E7%8E%AF%E4%BE%9D%E8%B5%96"><span class="toc-number">10.49.</span> <span class="toc-text">50.如何检测并避免循环依赖</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#51-%E5%A6%82%E4%BD%95%E5%8F%91%E5%B8%83%E4%B8%80%E4%B8%AA%E5%85%A8%E5%B1%80%E5%8F%AF%E6%89%A7%E8%A1%8C%E5%91%BD%E4%BB%A4%E7%9A%84-npm-package"><span class="toc-number">10.50.</span> <span class="toc-text">51.如何发布一个全局可执行命令的 npm package</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#52-%E5%A6%82%E4%BD%95%E6%AD%A3%E7%A1%AE%E5%BE%97%E7%9F%A5%E6%9F%90%E5%BC%A0%E5%9B%BE%E7%89%87%E7%9A%84-MIME-%E6%A0%BC%E5%BC%8F"><span class="toc-number">10.51.</span> <span class="toc-text">52.如何正确得知某张图片的 MIME 格式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#53-%E5%88%A4%E6%96%AD%E4%BB%A5%E4%B8%8B%E8%B7%AF%E7%94%B1%EF%BC%8C%E5%B0%86%E4%BC%9A%E5%93%8D%E5%BA%94%E5%93%AA%E4%B8%80%E4%B8%AA%E8%B7%AF%E7%94%B1"><span class="toc-number">10.52.</span> <span class="toc-text">53.判断以下路由，将会响应哪一个路由</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#54-%E8%AF%B7%E7%AE%80%E8%BF%B0%E9%87%8D%E6%96%B0%E7%99%BB%E5%BD%95-refresh-token-%E7%9A%84%E5%8E%9F%E7%90%86"><span class="toc-number">10.53.</span> <span class="toc-text">54.请简述重新登录 refresh token 的原理</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#55-%E7%AE%80%E8%BF%B0-koa-%E7%9A%84%E4%B8%AD%E9%97%B4%E4%BB%B6%E5%8E%9F%E7%90%86%EF%BC%8C%E6%89%8B%E5%86%99-koa-compose-%E4%BB%A3%E7%A0%81"><span class="toc-number">10.54.</span> <span class="toc-text">55.简述 koa 的中间件原理，手写 koa-compose 代码</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#56-%E5%9C%A8-Node-%E4%B8%AD%E5%A6%82%E4%BD%95%E8%AF%BB%E5%86%99%E6%96%87%E4%BB%B6"><span class="toc-number">10.55.</span> <span class="toc-text">56.在 Node 中如何读写文件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#57-%E5%9C%A8-Node-%E4%B8%AD%E5%A6%82%E4%BD%95%E5%8F%91%E9%80%81%E8%AF%B7%E6%B1%82"><span class="toc-number">10.56.</span> <span class="toc-text">57.在 Node 中如何发送请求</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#58-Node-%E4%B8%AD%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%A1%86%E6%9E%B6%E5%A6%82%E4%BD%95%E8%A7%A3%E6%9E%90-http-%E7%9A%84%E8%AF%B7%E6%B1%82%E4%BD%93-body"><span class="toc-number">10.57.</span> <span class="toc-text">58.Node 中服务端框架如何解析 http 的请求体 body</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#59-%E5%9C%A8-Node-%E4%B8%AD%E6%B5%81-stream-%E5%88%86%E4%B8%BA%E5%87%A0%E7%B1%BB%EF%BC%8C%E6%9C%89%E5%93%AA%E4%BA%9B%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF"><span class="toc-number">10.58.</span> <span class="toc-text">59.在 Node 中流 (stream) 分为几类，有哪些应用场景</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#60-%E8%AF%B7%E7%AE%80%E8%BF%B0%E4%B8%8B-Node-%E4%B8%8E%E6%B5%8F%E8%A7%88%E5%99%A8%E7%8E%AF%E5%A2%83%E4%B8%AD%E7%9A%84%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF"><span class="toc-number">10.59.</span> <span class="toc-text">60.请简述下 Node 与浏览器环境中的事件循环</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#61-%E5%9C%A8-Node-%E4%B8%AD%E5%A6%82%E4%BD%95%E8%AF%BB%E5%8F%96%E5%8F%AF%E8%AF%BB%E6%B5%81%E7%9A%84%E5%86%85%E5%AE%B9"><span class="toc-number">10.60.</span> <span class="toc-text">61.在 Node 中如何读取可读流的内容</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#62-%E5%9C%A8-Node-%E4%B8%AD%E5%A6%82%E4%BD%95%E8%AF%BB%E5%8F%96%E5%A4%A7%E6%96%87%E4%BB%B6%E7%9A%84%E5%86%85%E5%AE%B9"><span class="toc-number">10.61.</span> <span class="toc-text">62.在 Node 中如何读取大文件的内容</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#63-%E6%9C%89%E6%B2%A1%E6%9C%89%E4%BD%BF%E7%94%A8%E8%BF%87-Node-%E7%9A%84-inspect-%E8%BF%99%E4%B8%AA%E6%A0%B8%E5%BF%83%E6%A8%A1%E5%9D%97"><span class="toc-number">10.62.</span> <span class="toc-text">63.有没有使用过 Node 的 inspect 这个核心模块</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#React%E7%B3%BB%E5%88%97-%E5%85%B133%E9%A2%98"><span class="toc-number">11.</span> <span class="toc-text">React系列 共33题</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E5%AF%B9React%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E6%9C%89%E5%93%AA%E4%BA%9B%E7%89%B9%E6%80%A7%EF%BC%9F-opens-new-window"><span class="toc-number">11.1.</span> <span class="toc-text">1.面试官：说说对React的理解？有哪些特性？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4-Real-DOM%E5%92%8C-Virtual-DOM-%E7%9A%84%E5%8C%BA%E5%88%AB%EF%BC%9F%E4%BC%98%E7%BC%BA%E7%82%B9%EF%BC%9F-opens-new-window"><span class="toc-number">11.2.</span> <span class="toc-text">2.面试官：说说 Real DOM和 Virtual DOM 的区别？优缺点？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4-React-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E6%9C%89%E5%93%AA%E4%BA%9B%E4%B8%8D%E5%90%8C%E9%98%B6%E6%AE%B5%EF%BC%9F%E6%AF%8F%E4%B8%AA%E9%98%B6%E6%AE%B5%E5%AF%B9%E5%BA%94%E7%9A%84%E6%96%B9%E6%B3%95%E6%98%AF%EF%BC%9F-opens-new-window"><span class="toc-number">11.3.</span> <span class="toc-text">3.面试官：说说 React 生命周期有哪些不同阶段？每个阶段对应的方法是？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9Astate-%E5%92%8C-props%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB%EF%BC%9F-opens-new-window"><span class="toc-number">11.4.</span> <span class="toc-text">4.面试官：state 和 props有什么区别？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9Asuper-%E5%92%8Csuper-props-%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB%EF%BC%9F-opens-new-window"><span class="toc-number">11.5.</span> <span class="toc-text">5.面试官：super()和super(props)有什么区别？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4React%E4%B8%AD%E7%9A%84setState%E6%89%A7%E8%A1%8C%E6%9C%BA%E5%88%B6-opens-new-window"><span class="toc-number">11.6.</span> <span class="toc-text">6.面试官：说说React中的setState执行机制(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#7-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4React%E7%9A%84%E4%BA%8B%E4%BB%B6%E6%9C%BA%E5%88%B6%EF%BC%9F-opens-new-window"><span class="toc-number">11.7.</span> <span class="toc-text">7.面试官：说说React的事件机制？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#8-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9AReact%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A%E7%9A%84%E6%96%B9%E5%BC%8F%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F%E5%8C%BA%E5%88%AB%EF%BC%9F-opens-new-window"><span class="toc-number">11.8.</span> <span class="toc-text">8.面试官：React事件绑定的方式有哪些？区别？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#9-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9AReact%E6%9E%84%E5%BB%BA%E7%BB%84%E4%BB%B6%E7%9A%84%E6%96%B9%E5%BC%8F%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F%E5%8C%BA%E5%88%AB%EF%BC%9F-opens-new-window"><span class="toc-number">11.9.</span> <span class="toc-text">9.面试官：React构建组件的方式有哪些？区别？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#10-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9AReact%E4%B8%AD%E7%BB%84%E4%BB%B6%E4%B9%8B%E9%97%B4%E5%A6%82%E4%BD%95%E9%80%9A%E4%BF%A1%EF%BC%9F-opens-new-window"><span class="toc-number">11.10.</span> <span class="toc-text">10.面试官：React中组件之间如何通信？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#11-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9AReact%E4%B8%AD%E7%9A%84key%E6%9C%89%E4%BB%80%E4%B9%88%E4%BD%9C%E7%94%A8%EF%BC%9F-opens-new-window"><span class="toc-number">11.11.</span> <span class="toc-text">11.面试官：React中的key有什么作用？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#12-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E5%AF%B9React-refs-%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF%EF%BC%9F-opens-new-window"><span class="toc-number">11.12.</span> <span class="toc-text">12.面试官：说说对React refs 的理解？应用场景？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#13-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E5%AF%B9React%E4%B8%AD%E7%B1%BB%E7%BB%84%E4%BB%B6%E5%92%8C%E5%87%BD%E6%95%B0%E7%BB%84%E4%BB%B6%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB%EF%BC%9F-opens-new-window"><span class="toc-number">11.13.</span> <span class="toc-text">13.面试官：说说对React中类组件和函数组件的理解？有什么区别？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#14-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E5%AF%B9%E5%8F%97%E6%8E%A7%E7%BB%84%E4%BB%B6%E5%92%8C%E9%9D%9E%E5%8F%97%E6%8E%A7%E7%BB%84%E4%BB%B6%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF%EF%BC%9F-opens-new-window"><span class="toc-number">11.14.</span> <span class="toc-text">14.面试官：说说对受控组件和非受控组件的理解？应用场景？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#15-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E5%AF%B9%E9%AB%98%E9%98%B6%E7%BB%84%E4%BB%B6%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF-opens-new-window"><span class="toc-number">11.15.</span> <span class="toc-text">15.面试官：说说对高阶组件的理解？应用场景?(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#16-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E5%AF%B9React-Hooks%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E8%A7%A3%E5%86%B3%E4%BA%86%E4%BB%80%E4%B9%88%E9%97%AE%E9%A2%98%EF%BC%9F-opens-new-window"><span class="toc-number">11.16.</span> <span class="toc-text">16.面试官：说说对React Hooks的理解？解决了什么问题？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#17-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4react%E4%B8%AD%E5%BC%95%E5%85%A5css%E7%9A%84%E6%96%B9%E5%BC%8F%E6%9C%89%E5%93%AA%E5%87%A0%E7%A7%8D%EF%BC%9F%E5%8C%BA%E5%88%AB%EF%BC%9F-opens-new-window"><span class="toc-number">11.17.</span> <span class="toc-text">17.面试官：说说react中引入css的方式有哪几种？区别？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#18-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E5%9C%A8react%E4%B8%AD%E7%BB%84%E4%BB%B6%E9%97%B4%E8%BF%87%E6%B8%A1%E5%8A%A8%E7%94%BB%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%EF%BC%9F-opens-new-window"><span class="toc-number">11.18.</span> <span class="toc-text">18.面试官：在react中组件间过渡动画如何实现？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#19-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9Redux%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E5%85%B6%E5%B7%A5%E4%BD%9C%E5%8E%9F%E7%90%86%EF%BC%9F-opens-new-window"><span class="toc-number">11.19.</span> <span class="toc-text">19.面试官：说说你对Redux的理解？其工作原理？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#20-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E5%AF%B9Redux%E4%B8%AD%E9%97%B4%E4%BB%B6%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E5%B8%B8%E7%94%A8%E7%9A%84%E4%B8%AD%E9%97%B4%E4%BB%B6%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%EF%BC%9F-opens-new-window"><span class="toc-number">11.20.</span> <span class="toc-text">20.面试官：说说对Redux中间件的理解？常用的中间件有哪些？实现原理？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#21-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E4%BD%A0%E5%9C%A8React%E9%A1%B9%E7%9B%AE%E4%B8%AD%E6%98%AF%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8Redux%E7%9A%84-%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84%E6%98%AF%E5%A6%82%E4%BD%95%E5%88%92%E5%88%86%E7%9A%84%EF%BC%9F-opens-new-window"><span class="toc-number">11.21.</span> <span class="toc-text">21.面试官：你在React项目中是如何使用Redux的? 项目结构是如何划分的？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#22-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9React-Router%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E5%B8%B8%E7%94%A8%E7%9A%84Router%E7%BB%84%E4%BB%B6%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F-opens-new-window"><span class="toc-number">11.22.</span> <span class="toc-text">22.面试官：说说你对React Router的理解？常用的Router组件有哪些？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#23-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4React-Router%E6%9C%89%E5%87%A0%E7%A7%8D%E6%A8%A1%E5%BC%8F%EF%BC%9F%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%EF%BC%9F-opens-new-window"><span class="toc-number">11.23.</span> <span class="toc-text">23.面试官：说说React Router有几种模式？实现原理？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#24-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9immutable%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E5%A6%82%E4%BD%95%E5%BA%94%E7%94%A8%E5%9C%A8react%E9%A1%B9%E7%9B%AE%E4%B8%AD%EF%BC%9F-opens-new-window"><span class="toc-number">11.24.</span> <span class="toc-text">24.面试官：说说你对immutable的理解？如何应用在react项目中？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#25-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4React-render%E6%96%B9%E6%B3%95%E7%9A%84%E5%8E%9F%E7%90%86%EF%BC%9F%E5%9C%A8%E4%BB%80%E4%B9%88%E6%97%B6%E5%80%99%E4%BC%9A%E8%A2%AB%E8%A7%A6%E5%8F%91%EF%BC%9F-opens-new-window"><span class="toc-number">11.25.</span> <span class="toc-text">25.面试官：说说React render方法的原理？在什么时候会被触发？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#26-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E6%98%AF%E5%A6%82%E4%BD%95%E6%8F%90%E9%AB%98%E7%BB%84%E4%BB%B6%E7%9A%84%E6%B8%B2%E6%9F%93%E6%95%88%E7%8E%87%E7%9A%84%EF%BC%9F%E5%9C%A8React%E4%B8%AD%E5%A6%82%E4%BD%95%E9%81%BF%E5%85%8D%E4%B8%8D%E5%BF%85%E8%A6%81%E7%9A%84render%EF%BC%9F-opens-new-window"><span class="toc-number">11.26.</span> <span class="toc-text">26.面试官：说说你是如何提高组件的渲染效率的？在React中如何避免不必要的render？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#27-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4React-diff%E7%9A%84%E5%8E%9F%E7%90%86%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F-opens-new-window"><span class="toc-number">11.27.</span> <span class="toc-text">27.面试官：说说React diff的原理是什么？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#28-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E5%AF%B9Fiber%E6%9E%B6%E6%9E%84%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E8%A7%A3%E5%86%B3%E4%BA%86%E4%BB%80%E4%B9%88%E9%97%AE%E9%A2%98%EF%BC%9F-opens-new-window"><span class="toc-number">11.28.</span> <span class="toc-text">28.面试官：说说对Fiber架构的理解？解决了什么问题？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#29-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4React-Jsx%E8%BD%AC%E6%8D%A2%E6%88%90%E7%9C%9F%E5%AE%9EDOM%E8%BF%87%E7%A8%8B%EF%BC%9F-opens-new-window"><span class="toc-number">11.29.</span> <span class="toc-text">29.面试官：说说React Jsx转换成真实DOM过程？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#30-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4-React-%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E7%9A%84%E6%89%8B%E6%AE%B5%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F-opens-new-window"><span class="toc-number">11.30.</span> <span class="toc-text">30.面试官：说说 React 性能优化的手段有哪些？ (opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#31-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%9C%A8React%E9%A1%B9%E7%9B%AE%E6%98%AF%E5%A6%82%E4%BD%95%E6%8D%95%E8%8E%B7%E9%94%99%E8%AF%AF%E7%9A%84%EF%BC%9F-opens-new-window"><span class="toc-number">11.31.</span> <span class="toc-text">31.面试官：说说你在React项目是如何捕获错误的？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#32-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4React%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%B8%B2%E6%9F%93%E6%80%8E%E4%B9%88%E5%81%9A%EF%BC%9F%E5%8E%9F%E7%90%86%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F-opens-new-window"><span class="toc-number">11.32.</span> <span class="toc-text">32.面试官：说说React服务端渲染怎么做？原理是什么？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#33-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%9C%A8%E4%BD%BF%E7%94%A8React-%E8%BF%87%E7%A8%8B%E4%B8%AD%E9%81%87%E5%88%B0%E7%9A%84%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%EF%BC%9F%E5%A6%82%E4%BD%95%E8%A7%A3%E5%86%B3-opens-new-window"><span class="toc-number">11.33.</span> <span class="toc-text">33.面试官：说说你在使用React 过程中遇到的常见问题？如何解决?(opens new window)</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E7%89%88%E6%9C%AC%E6%8E%A7%E5%88%B6%E7%B3%BB%E5%88%97-%E5%85%B110%E9%A2%98"><span class="toc-number">12.</span> <span class="toc-text">版本控制系列 共10题</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E5%B8%B8%E7%94%A8%E7%9A%84%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86%E5%B7%A5%E5%85%B7%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F-opens-new-window"><span class="toc-number">12.1.</span> <span class="toc-text">1.面试官：说说你对版本管理的理解？常用的版本管理工具有哪些？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9Git%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F-opens-new-window"><span class="toc-number">12.2.</span> <span class="toc-text">2.面试官：说说你对Git的理解？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4Git%E4%B8%AD-fork-clone-branch%E8%BF%99%E4%B8%89%E4%B8%AA%E6%A6%82%E5%BF%B5%EF%BC%8C%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB-opens-new-window"><span class="toc-number">12.3.</span> <span class="toc-text">3.面试官：说说Git中 fork, clone,branch这三个概念，有什么区别?(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4Git%E5%B8%B8%E7%94%A8%E7%9A%84%E5%91%BD%E4%BB%A4%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F-opens-new-window"><span class="toc-number">12.4.</span> <span class="toc-text">4.面试官：说说Git常用的命令有哪些？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4Git-%E4%B8%AD-HEAD%E3%80%81%E5%B7%A5%E4%BD%9C%E6%A0%91%E5%92%8C%E7%B4%A2%E5%BC%95%E4%B9%8B%E9%97%B4%E7%9A%84%E5%8C%BA%E5%88%AB%EF%BC%9F-opens-new-window"><span class="toc-number">12.5.</span> <span class="toc-text">5.面试官：说说Git 中 HEAD、工作树和索引之间的区别？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E5%AF%B9git-pull-%E5%92%8C-git-fetch-%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB%EF%BC%9F-opens-new-window"><span class="toc-number">12.6.</span> <span class="toc-text">6.面试官：说说对git pull 和 git fetch 的理解？有什么区别？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#7-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9git-stash-%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF%EF%BC%9F-opens-new-window"><span class="toc-number">12.7.</span> <span class="toc-text">7.面试官：说说你对git stash 的理解？应用场景？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#8-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9git-rebase-%E5%92%8C-git-merge%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E5%8C%BA%E5%88%AB%EF%BC%9F-opens-new-window"><span class="toc-number">12.8.</span> <span class="toc-text">8.面试官：说说你对git rebase 和 git merge的理解？区别？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#9-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4-git-%E5%8F%91%E7%94%9F%E5%86%B2%E7%AA%81%E7%9A%84%E5%9C%BA%E6%99%AF%EF%BC%9F%E5%A6%82%E4%BD%95%E8%A7%A3%E5%86%B3%EF%BC%9F-opens-new-window"><span class="toc-number">12.9.</span> <span class="toc-text">9.面试官：说说 git 发生冲突的场景？如何解决？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#10-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9git-reset-%E5%92%8C-git-revert-%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E5%8C%BA%E5%88%AB%EF%BC%9F-opens-new-window"><span class="toc-number">12.10.</span> <span class="toc-text">10.面试官：说说你对git reset 和 git revert 的理解？区别？(opens new window)</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F%E7%B3%BB%E5%88%97-%E5%85%B17%E9%A2%98"><span class="toc-number">13.</span> <span class="toc-text">操作系统系列 共7题</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E6%A0%B8%E5%BF%83%E6%A6%82%E5%BF%B5%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F-opens-new-window"><span class="toc-number">13.1.</span> <span class="toc-text">1.面试官：说说你对操作系统的理解？核心概念有哪些？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BB%80%E4%B9%88%E6%98%AF%E8%BF%9B%E7%A8%8B%EF%BC%9F%E4%BB%80%E4%B9%88%E6%98%AF%E7%BA%BF%E7%A8%8B%EF%BC%9F%E5%8C%BA%E5%88%AB%EF%BC%9F-opens-new-window"><span class="toc-number">13.2.</span> <span class="toc-text">2.面试官：说说什么是进程？什么是线程？区别？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4-linux%E7%B3%BB%E7%BB%9F%E4%B8%8B-%E6%96%87%E4%BB%B6%E6%93%8D%E4%BD%9C%E5%B8%B8%E7%94%A8%E7%9A%84%E5%91%BD%E4%BB%A4%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F-opens-new-window"><span class="toc-number">13.3.</span> <span class="toc-text">3.面试官：说说 linux系统下 文件操作常用的命令有哪些？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4-linux-%E7%B3%BB%E7%BB%9F%E4%B8%8B-%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91%E5%B8%B8%E7%94%A8%E7%9A%84%E5%91%BD%E4%BB%A4%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F-opens-new-window"><span class="toc-number">13.4.</span> <span class="toc-text">4.面试官：说说 linux 系统下 文本编辑常用的命令有哪些？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9-linux-%E7%94%A8%E6%88%B7%E7%AE%A1%E7%90%86%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E7%9B%B8%E5%85%B3%E7%9A%84%E5%91%BD%E4%BB%A4%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F-opens-new-window"><span class="toc-number">13.5.</span> <span class="toc-text">5.面试官：说说你对 linux 用户管理的理解？相关的命令有哪些？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9%E8%BE%93%E5%85%A5%E8%BE%93%E5%87%BA%E9%87%8D%E5%AE%9A%E5%90%91%E5%92%8C%E7%AE%A1%E9%81%93%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF%EF%BC%9F-opens-new-window"><span class="toc-number">13.6.</span> <span class="toc-text">6.面试官：说说你对输入输出重定向和管道的理解？应用场景？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#7-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9-shell-%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E5%B8%B8%E8%A7%81%E7%9A%84%E5%91%BD%E4%BB%A4%EF%BC%9F-opens-new-window"><span class="toc-number">13.7.</span> <span class="toc-text">7.面试官：说说你对 shell 的理解？常见的命令？(opens new window)</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#typescript%E7%B3%BB%E5%88%97-%E5%85%B112%E9%A2%98"><span class="toc-number">14.</span> <span class="toc-text">typescript系列 共12题</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9-typescript-%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E4%B8%8E-javascript-%E7%9A%84%E5%8C%BA%E5%88%AB%EF%BC%9F-opens-new-window"><span class="toc-number">14.1.</span> <span class="toc-text">1.面试官：说说你对 typescript 的理解？与 javascript 的区别？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4-typescript-%E7%9A%84%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F-opens-new-window"><span class="toc-number">14.2.</span> <span class="toc-text">2.面试官：说说 typescript 的数据类型有哪些？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9-TypeScript-%E4%B8%AD%E6%9E%9A%E4%B8%BE%E7%B1%BB%E5%9E%8B%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF%EF%BC%9F-opens-new-window"><span class="toc-number">14.3.</span> <span class="toc-text">3.面试官：说说你对 TypeScript 中枚举类型的理解？应用场景？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9-TypeScript-%E4%B8%AD%E6%8E%A5%E5%8F%A3%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF%EF%BC%9F-opens-new-window"><span class="toc-number">14.4.</span> <span class="toc-text">4.面试官：说说你对 TypeScript 中接口的理解？应用场景？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9-TypeScript-%E4%B8%AD%E7%B1%BB%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF%EF%BC%9F-opens-new-window"><span class="toc-number">14.5.</span> <span class="toc-text">5.面试官：说说你对 TypeScript 中类的理解？应用场景？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9-TypeScript-%E4%B8%AD%E5%87%BD%E6%95%B0%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E4%B8%8E-JavaScript-%E5%87%BD%E6%95%B0%E7%9A%84%E5%8C%BA%E5%88%AB%EF%BC%9F-opens-new-window"><span class="toc-number">14.6.</span> <span class="toc-text">6.面试官：说说你对 TypeScript 中函数的理解？与 JavaScript 函数的区别？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#7-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9-TypeScript-%E4%B8%AD%E6%B3%9B%E5%9E%8B%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF%EF%BC%9F-opens-new-window"><span class="toc-number">14.7.</span> <span class="toc-text">7.面试官：说说你对 TypeScript 中泛型的理解？应用场景？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#8-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9-TypeScript-%E4%B8%AD%E9%AB%98%E7%BA%A7%E7%B1%BB%E5%9E%8B%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F-opens-new-window"><span class="toc-number">14.8.</span> <span class="toc-text">8.面试官：说说你对 TypeScript 中高级类型的理解？有哪些？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#9-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9-TypeScript-%E8%A3%85%E9%A5%B0%E5%99%A8%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF%EF%BC%9F-opens-new-window"><span class="toc-number">14.9.</span> <span class="toc-text">9.面试官：说说你对 TypeScript 装饰器的理解？应用场景？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#10-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E5%AF%B9-TypeScript-%E4%B8%AD%E5%91%BD%E5%90%8D%E7%A9%BA%E9%97%B4%E4%B8%8E%E6%A8%A1%E5%9D%97%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E5%8C%BA%E5%88%AB%EF%BC%9F-opens-new-window"><span class="toc-number">14.10.</span> <span class="toc-text">10.面试官：说说对 TypeScript 中命名空间与模块的理解？区别？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#11-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E5%A6%82%E4%BD%95%E5%9C%A8React%E9%A1%B9%E7%9B%AE%E4%B8%AD%E5%BA%94%E7%94%A8TypeScript%EF%BC%9F-opens-new-window"><span class="toc-number">14.11.</span> <span class="toc-text">11.面试官：说说如何在React项目中应用TypeScript？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#12-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E5%A6%82%E4%BD%95%E5%9C%A8Vue%E9%A1%B9%E7%9B%AE%E4%B8%AD%E5%BA%94%E7%94%A8TypeScript%EF%BC%9F-opens-new-window"><span class="toc-number">14.12.</span> <span class="toc-text">12.面试官：说说如何在Vue项目中应用TypeScript？(opens new window)</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E7%AE%97%E6%B3%95%E7%B3%BB%E5%88%97-%E5%85%B118%E9%A2%98"><span class="toc-number">15.</span> <span class="toc-text">算法系列 共18题</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9%E7%AE%97%E6%B3%95%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF%EF%BC%9F-opens-new-window"><span class="toc-number">15.1.</span> <span class="toc-text">1.面试官：说说你对算法的理解？应用场景？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9%E7%AE%97%E6%B3%95%E4%B8%AD%E6%97%B6%E9%97%B4%E5%A4%8D%E6%9D%82%E5%BA%A6%EF%BC%8C%E7%A9%BA%E9%97%B4%E5%A4%8D%E6%9D%82%E5%BA%A6%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E5%A6%82%E4%BD%95%E8%AE%A1%E7%AE%97%EF%BC%9F-opens-new-window"><span class="toc-number">15.2.</span> <span class="toc-text">2.面试官：说说你对算法中时间复杂度，空间复杂度的理解？如何计算？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F%E5%8C%BA%E5%88%AB%EF%BC%9F-opens-new-window"><span class="toc-number">15.3.</span> <span class="toc-text">3.面试官：说说你对数据结构的理解？有哪些？区别？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9%E6%A0%88%E3%80%81%E9%98%9F%E5%88%97%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF%EF%BC%9F-opens-new-window"><span class="toc-number">15.4.</span> <span class="toc-text">4.面试官：说说你对栈、队列的理解？应用场景？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9%E9%93%BE%E8%A1%A8%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E5%B8%B8%E8%A7%81%E7%9A%84%E6%93%8D%E4%BD%9C%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F-opens-new-window"><span class="toc-number">15.5.</span> <span class="toc-text">5.面试官：说说你对链表的理解？常见的操作有哪些？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9%E9%9B%86%E5%90%88%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E5%B8%B8%E8%A7%81%E7%9A%84%E6%93%8D%E4%BD%9C%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F-opens-new-window"><span class="toc-number">15.6.</span> <span class="toc-text">6.面试官：说说你对集合的理解？常见的操作有哪些？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#7-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9%E6%A0%91%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E7%9B%B8%E5%85%B3%E7%9A%84%E6%93%8D%E4%BD%9C%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F-opens-new-window"><span class="toc-number">15.7.</span> <span class="toc-text">7.面试官：说说你对树的理解？相关的操作有哪些？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#8-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9%E5%A0%86%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%EF%BC%9F%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF%EF%BC%9F-opens-new-window"><span class="toc-number">15.8.</span> <span class="toc-text">8.面试官：说说你对堆的理解？如何实现？应用场景？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#9-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9%E5%9B%BE%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E7%9B%B8%E5%85%B3%E6%93%8D%E4%BD%9C%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F-opens-new-window"><span class="toc-number">15.9.</span> <span class="toc-text">9.面试官：说说你对图的理解？相关操作有哪些？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#10-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E5%B8%B8%E8%A7%81%E7%9A%84%E6%8E%92%E5%BA%8F%E7%AE%97%E6%B3%95%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F%E5%8C%BA%E5%88%AB%EF%BC%9F-opens-new-window"><span class="toc-number">15.10.</span> <span class="toc-text">10.面试官：说说常见的排序算法有哪些？区别？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#11-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9%E5%86%92%E6%B3%A1%E6%8E%92%E5%BA%8F%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%EF%BC%9F%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF%EF%BC%9F-opens-new-window"><span class="toc-number">15.11.</span> <span class="toc-text">11.面试官：说说你对冒泡排序的理解？如何实现？应用场景？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#12-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9%E9%80%89%E6%8B%A9%E6%8E%92%E5%BA%8F%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%EF%BC%9F%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF%EF%BC%9F-opens-new-window"><span class="toc-number">15.12.</span> <span class="toc-text">12.面试官：说说你对选择排序的理解？如何实现？应用场景？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#13-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9%E6%8F%92%E5%85%A5%E6%8E%92%E5%BA%8F%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%EF%BC%9F%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF%EF%BC%9F-opens-new-window"><span class="toc-number">15.13.</span> <span class="toc-text">13.面试官：说说你对插入排序的理解？如何实现？应用场景？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#14-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9%E5%BD%92%E5%B9%B6%E6%8E%92%E5%BA%8F%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%EF%BC%9F%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF%EF%BC%9F-opens-new-window"><span class="toc-number">15.14.</span> <span class="toc-text">14.面试官：说说你对归并排序的理解？如何实现？应用场景？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#15-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9%E5%BF%AB%E9%80%9F%E6%8E%92%E5%BA%8F%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%EF%BC%9F%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF%EF%BC%9F-opens-new-window"><span class="toc-number">15.15.</span> <span class="toc-text">15.面试官：说说你对快速排序的理解？如何实现？应用场景？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#16-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9%E4%BA%8C%E5%88%86%E6%9F%A5%E6%89%BE%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%EF%BC%9F%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF%EF%BC%9F-opens-new-window"><span class="toc-number">15.16.</span> <span class="toc-text">16.面试官：说说你对二分查找的理解？如何实现？应用场景？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#17-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9%E5%88%86%E8%80%8C%E6%B2%BB%E4%B9%8B%E3%80%81%E5%8A%A8%E6%80%81%E8%A7%84%E5%88%92%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E5%8C%BA%E5%88%AB%EF%BC%9F-opens-new-window"><span class="toc-number">15.17.</span> <span class="toc-text">17.面试官：说说你对分而治之、动态规划的理解？区别？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#18-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9%E8%B4%AA%E5%BF%83%E7%AE%97%E6%B3%95%E3%80%81%E5%9B%9E%E6%BA%AF%E7%AE%97%E6%B3%95%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF%EF%BC%9F-opens-new-window"><span class="toc-number">15.18.</span> <span class="toc-text">18.面试官：说说你对贪心算法、回溯算法的理解？应用场景？(opens new window)</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%B3%BB%E5%88%97-%E5%85%B18%E9%A2%98"><span class="toc-number">16.</span> <span class="toc-text">小程序系列 共8题</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E4%BC%98%E7%BC%BA%E7%82%B9%EF%BC%9F-opens-new-window"><span class="toc-number">16.1.</span> <span class="toc-text">1.面试官：说说你对微信小程序的理解？优缺点？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9A%84%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%87%BD%E6%95%B0%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F-opens-new-window"><span class="toc-number">16.2.</span> <span class="toc-text">2.面试官：说说微信小程序的生命周期函数有哪些？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E8%B7%AF%E7%94%B1%E8%B7%B3%E8%BD%AC%E7%9A%84%E6%96%B9%E5%BC%8F%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F%E5%8C%BA%E5%88%AB%EF%BC%9F-opens-new-window"><span class="toc-number">16.3.</span> <span class="toc-text">3.面试官：说说微信小程序中路由跳转的方式有哪些？区别？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E6%8F%90%E9%AB%98%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9A%84%E5%BA%94%E7%94%A8%E9%80%9F%E5%BA%A6%E7%9A%84%E6%89%8B%E6%AE%B5%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F-opens-new-window"><span class="toc-number">16.4.</span> <span class="toc-text">4.面试官：说说提高微信小程序的应用速度的手段有哪些？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9A%84%E7%99%BB%E5%BD%95%E6%B5%81%E7%A8%8B%EF%BC%9F-opens-new-window"><span class="toc-number">16.5.</span> <span class="toc-text">5.面试官：说说微信小程序的登录流程？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9A%84%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B%EF%BC%9F-opens-new-window"><span class="toc-number">16.6.</span> <span class="toc-text">6.面试官：说说微信小程序的发布流程？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#7-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9A%84%E6%94%AF%E4%BB%98%E6%B5%81%E7%A8%8B%EF%BC%9F-opens-new-window"><span class="toc-number">16.7.</span> <span class="toc-text">7.面试官：说说微信小程序的支付流程？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#8-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9A%84%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%EF%BC%9F-opens-new-window"><span class="toc-number">16.8.</span> <span class="toc-text">8.面试官：说说微信小程序的实现原理？(opens new window)</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%E7%B3%BB%E5%88%97-%E5%85%B16%E9%A2%98"><span class="toc-number">17.</span> <span class="toc-text">设计模式系列 共6题</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E5%AF%B9%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E5%B8%B8%E8%A7%81%E7%9A%84%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F-opens-new-window"><span class="toc-number">17.1.</span> <span class="toc-text">1.面试官：说说对设计模式的理解？常见的设计模式有哪些？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9%E5%8D%95%E4%BE%8B%E6%A8%A1%E5%BC%8F%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%EF%BC%9F-opens-new-window"><span class="toc-number">17.2.</span> <span class="toc-text">2.面试官：说说你对单例模式的理解？如何实现？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9%E5%B7%A5%E5%8E%82%E6%A8%A1%E5%BC%8F%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF%EF%BC%9F-opens-new-window"><span class="toc-number">17.3.</span> <span class="toc-text">3.面试官：说说你对工厂模式的理解？应用场景？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9%E7%AD%96%E7%95%A5%E6%A8%A1%E5%BC%8F%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF%EF%BC%9F-opens-new-window"><span class="toc-number">17.4.</span> <span class="toc-text">4.面试官：说说你对策略模式的理解？应用场景？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9%E4%BB%A3%E7%90%86%E6%A8%A1%E5%BC%8F%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF%EF%BC%9F-opens-new-window"><span class="toc-number">17.5.</span> <span class="toc-text">5.面试官：说说你对代理模式的理解？应用场景？(opens new window)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-%E9%9D%A2%E8%AF%95%E5%AE%98%EF%BC%9A%E8%AF%B4%E8%AF%B4%E4%BD%A0%E5%AF%B9%E5%8F%91%E5%B8%83%E8%AE%A2%E9%98%85%E3%80%81%E8%A7%82%E5%AF%9F%E8%80%85%E6%A8%A1%E5%BC%8F%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F%E5%8C%BA%E5%88%AB%EF%BC%9F-opens-new-window"><span class="toc-number">17.6.</span> <span class="toc-text">6.面试官：说说你对发布订阅、观察者模式的理解？区别？(opens new window)</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96-%E5%85%B16%E9%A2%98"><span class="toc-number">18.</span> <span class="toc-text">性能优化 共6题</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-prefetch-%E4%B8%8E-preload-%E7%9A%84%E5%8C%BA%E5%88%AB%E6%98%AF%E4%BB%80%E4%B9%88"><span class="toc-number">18.1.</span> <span class="toc-text">1.prefetch 与 preload 的区别是什么</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA-once-%E5%87%BD%E6%95%B0%EF%BC%8C%E8%AE%B0%E5%BF%86%E8%BF%94%E5%9B%9E%E7%BB%93%E6%9E%9C%E5%8F%AA%E6%89%A7%E8%A1%8C%E4%B8%80%E6%AC%A1"><span class="toc-number">18.2.</span> <span class="toc-text">2.实现一个 once 函数，记忆返回结果只执行一次</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-%E5%A6%82%E4%BD%95%E5%8E%8B%E7%BC%A9%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE%E4%B8%AD-JS-%E7%9A%84%E4%BD%93%E7%A7%AF"><span class="toc-number">18.3.</span> <span class="toc-text">3.如何压缩前端项目中 JS 的体积</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-%E5%A6%82%E4%BD%95%E4%BC%98%E5%8C%96-React-%E9%A1%B9%E7%9B%AE%E7%9A%84%E6%80%A7%E8%83%BD"><span class="toc-number">18.4.</span> <span class="toc-text">4.如何优化 React 项目的性能</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-%E5%A6%82%E4%BD%95%E6%8F%90%E9%AB%98%E9%A6%96%E5%B1%8F%E6%B8%B2%E6%9F%93%E6%97%B6%E9%97%B4%EF%BC%9F"><span class="toc-number">18.5.</span> <span class="toc-text">5.如何提高首屏渲染时间？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-%E7%BD%91%E7%AB%99%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E4%B8%AD%EF%BC%8C%E5%A6%82%E4%BD%95%E5%AF%B9%E5%B0%8F%E5%9B%BE%E7%89%87%E8%BF%9B%E8%A1%8C%E4%BC%98%E5%8C%96"><span class="toc-number">18.6.</span> <span class="toc-text">6.网站性能优化中，如何对小图片进行优化</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96-%E5%85%B179%E9%A2%98"><span class="toc-number">19.</span> <span class="toc-text">前端工程化 共79题</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-%E5%BD%93%E6%96%B0%E5%85%A5%E8%81%8C%E4%B8%80%E5%AE%B6%E5%85%AC%E5%8F%B8%E6%97%B6%EF%BC%8C%E5%A6%82%E4%BD%95%E5%BF%AB%E9%80%9F%E6%90%AD%E5%BB%BA%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E5%B9%B6%E8%AE%A9%E5%BA%94%E7%94%A8%E8%B7%91%E8%B5%B7%E6%9D%A5"><span class="toc-number">19.1.</span> <span class="toc-text">1.当新入职一家公司时，如何快速搭建开发环境并让应用跑起来</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#npm-run-dev-%E4%B8%8E-npm-start-%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">19.1.1.</span> <span class="toc-text">npm run dev 与 npm start 的区别</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-%E7%BD%91%E7%AB%99%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E9%83%BD%E6%9C%89%E5%93%AA%E4%BA%9B%E7%82%B9"><span class="toc-number">19.2.</span> <span class="toc-text">2.网站性能优化都有哪些点</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-%E4%BD%A0%E4%BB%AC%E7%9A%84%E5%89%8D%E7%AB%AF%E4%BB%A3%E7%A0%81%E4%B8%8A%E7%BA%BF%E9%83%A8%E7%BD%B2%E4%B8%80%E6%AC%A1%E9%9C%80%E8%A6%81%E5%A4%9A%E9%95%BF%E6%97%B6%E9%97%B4%EF%BC%8C%E9%9C%80%E8%A6%81%E4%BA%BA%E4%B8%BA%E5%B9%B2%E9%A2%84%E5%90%97"><span class="toc-number">19.3.</span> <span class="toc-text">3.你们的前端代码上线部署一次需要多长时间，需要人为干预吗</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-%E6%9C%89%E6%B2%A1%E6%9C%89%E7%94%A8-npm-%E5%8F%91%E5%B8%83%E8%BF%87-package%EF%BC%8C%E5%A6%82%E4%BD%95%E5%8F%91%E5%B8%83"><span class="toc-number">19.4.</span> <span class="toc-text">4.有没有用 npm 发布过 package，如何发布</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-js-%E4%BB%A3%E7%A0%81%E5%8E%8B%E7%BC%A9-minify-%E7%9A%84%E5%8E%9F%E7%90%86%E6%98%AF%E4%BB%80%E4%B9%88"><span class="toc-number">19.5.</span> <span class="toc-text">5.js 代码压缩 minify 的原理是什么</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E5%8E%BB%E9%99%A4%E5%A4%9A%E4%BD%99%E5%AD%97%E7%AC%A6-%E7%A9%BA%E6%A0%BC%EF%BC%8C%E6%8D%A2%E8%A1%8C%E5%8F%8A%E6%B3%A8%E9%87%8A-1"><span class="toc-number">19.5.1.</span> <span class="toc-text">1.去除多余字符: 空格，换行及注释</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E5%8E%8B%E7%BC%A9%E5%8F%98%E9%87%8F%E5%90%8D%EF%BC%9A%E5%8F%98%E9%87%8F%E5%90%8D%EF%BC%8C%E5%87%BD%E6%95%B0%E5%90%8D%E5%8F%8A%E5%B1%9E%E6%80%A7%E5%90%8D-1"><span class="toc-number">19.5.2.</span> <span class="toc-text">2.压缩变量名：变量名，函数名及属性名</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E8%A7%A3%E6%9E%90%E7%A8%8B%E5%BA%8F%E9%80%BB%E8%BE%91%EF%BC%9A%E5%90%88%E5%B9%B6%E5%A3%B0%E6%98%8E%E4%BB%A5%E5%8F%8A%E5%B8%83%E5%B0%94%E5%80%BC%E7%AE%80%E5%8C%96-1"><span class="toc-number">19.5.3.</span> <span class="toc-text">3.解析程序逻辑：合并声明以及布尔值简化</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-%E8%A7%A3%E6%9E%90%E7%A8%8B%E5%BA%8F%E9%80%BB%E8%BE%91-%E7%BC%96%E8%AF%91%E9%A2%84%E8%AE%A1%E7%AE%97-1"><span class="toc-number">19.5.4.</span> <span class="toc-text">4.解析程序逻辑: 编译预计算</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-%E6%9D%83%E9%99%90%E8%AE%BE%E8%AE%A1%E4%B8%AD%E7%9A%84-RABC-%E6%98%AF%E6%8C%87%E4%BB%80%E4%B9%88"><span class="toc-number">19.6.</span> <span class="toc-text">6.权限设计中的 RABC 是指什么</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#7-%E5%A6%82%E4%BD%95%E8%BF%9B%E8%A1%8C%E4%BB%A3%E7%A0%81%E8%B4%A8%E9%87%8F%E6%A3%80%E6%B5%8B"><span class="toc-number">19.7.</span> <span class="toc-text">7.如何进行代码质量检测</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#8-performance-API-%E4%B8%AD%E4%BB%80%E4%B9%88%E6%8C%87%E6%A0%87%E5%8F%AF%E4%BB%A5%E8%A1%A1%E9%87%8F%E9%A6%96%E5%B1%8F%E6%97%B6%E9%97%B4"><span class="toc-number">19.8.</span> <span class="toc-text">8.performance API 中什么指标可以衡量首屏时间</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#9-%E4%BB%80%E4%B9%88%E6%98%AF-Open-Graph-%E5%8D%8F%E8%AE%AE%EF%BC%8C%E7%94%A8%E6%9D%A5%E5%81%9A%E4%BB%80%E4%B9%88"><span class="toc-number">19.9.</span> <span class="toc-text">9.什么是 Open Graph 协议，用来做什么</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#10-%E7%AE%80%E8%BF%B0%E4%BD%A0%E4%BB%AC%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE%E4%B8%AD%E8%B5%84%E6%BA%90%E7%9A%84%E7%BC%93%E5%AD%98%E9%85%8D%E7%BD%AE%E7%AD%96%E7%95%A5"><span class="toc-number">19.10.</span> <span class="toc-text">10.简述你们前端项目中资源的缓存配置策略</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#11-%E5%A6%82%E4%BD%95%E5%8A%A0%E9%80%9F-npm-install"><span class="toc-number">19.11.</span> <span class="toc-text">11.如何加速 npm install</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#12-npm-i-%E4%B8%8E-npm-ci-%E7%9A%84%E5%8C%BA%E5%88%AB%E6%98%AF%E4%BB%80%E4%B9%88"><span class="toc-number">19.12.</span> <span class="toc-text">12.npm i 与 npm ci 的区别是什么</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#13-package-lock-json-%E6%9C%89%E4%BB%80%E4%B9%88%E4%BD%9C%E7%94%A8%EF%BC%8C%E5%A6%82%E6%9E%9C%E9%A1%B9%E7%9B%AE%E4%B8%AD%E6%B2%A1%E6%9C%89%E5%AE%83%E4%BC%9A%E6%80%8E%E4%B9%88%E6%A0%B7%EF%BC%8C%E4%B8%BE%E4%BE%8B%E8%AF%B4%E6%98%8E"><span class="toc-number">19.13.</span> <span class="toc-text">13.package-lock.json 有什么作用，如果项目中没有它会怎么样，举例说明</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#14-%E5%89%8D%E7%AB%AF%E5%A6%82%E4%BD%95%E8%BF%9B%E8%A1%8C%E5%A4%9A%E5%88%86%E6%94%AF%E9%83%A8%E7%BD%B2"><span class="toc-number">19.14.</span> <span class="toc-text">14.前端如何进行多分支部署</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#15-%E4%B8%BB%E5%9F%9F%E5%90%8D%E7%9A%84-SEO-%E6%98%AF%E5%90%A6%E6%AF%94%E4%BA%8C%E7%BA%A7%E5%9F%9F%E5%90%8D%E8%A6%81%E6%9B%B4%E5%A5%BD"><span class="toc-number">19.15.</span> <span class="toc-text">15.主域名的 SEO 是否比二级域名要更好</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#16-%E5%88%9A%E5%88%9A%E5%90%AF%E5%8A%A8%E4%BA%86%E4%B8%80%E4%B8%AA%E6%9C%8D%E5%8A%A1%EF%BC%8C%E5%A6%82%E4%BD%95%E7%9F%A5%E9%81%93%E8%BF%99%E4%B8%AA%E6%9C%8D%E5%8A%A1%E5%AF%B9%E5%BA%94%E7%9A%84%E7%AB%AF%E5%8F%A3%E5%8F%B7%E6%98%AF%E5%A4%9A%E5%B0%91"><span class="toc-number">19.16.</span> <span class="toc-text">16.刚刚启动了一个服务，如何知道这个服务对应的端口号是多少</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#17-%E5%9B%BE%E7%89%87%E9%98%B2%E7%9B%97%E9%93%BE%E5%8E%9F%E7%90%86%E6%98%AF%E4%BB%80%E4%B9%88"><span class="toc-number">19.17.</span> <span class="toc-text">17.图片防盗链原理是什么</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#18-%E4%BD%A0%E5%A6%82%E4%BD%95%E7%9C%8B%E5%BE%85-serverless"><span class="toc-number">19.18.</span> <span class="toc-text">18.你如何看待 serverless</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#19-%E4%BB%80%E4%B9%88%E6%98%AF-XSS-%E6%94%BB%E5%87%BB%EF%BC%8C%E5%A6%82%E4%BD%95%E9%81%BF%E5%85%8D"><span class="toc-number">19.19.</span> <span class="toc-text">19.什么是 XSS 攻击，如何避免</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#20-%E5%A6%82%E4%BD%95%E6%9F%A5%E7%9C%8B%E4%BD%A0%E4%BB%AC-JS-%E9%A1%B9%E7%9B%AE%E4%B8%AD%E5%BA%94%E9%87%87%E7%94%A8%E7%9A%84-node-%E7%89%88%E6%9C%AC"><span class="toc-number">19.20.</span> <span class="toc-text">20.如何查看你们 JS 项目中应采用的 node 版本</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#21-%E5%A6%82%E4%BD%95%E6%9F%A5%E7%9C%8B-node-modules-%E6%9F%90%E4%B8%80%E6%96%87%E4%BB%B6%E5%A4%B9-%E7%9A%84%E4%BD%93%E7%A7%AF%E6%9C%89%E5%A4%9A%E5%A4%A7"><span class="toc-number">19.21.</span> <span class="toc-text">21.如何查看 node_modules(某一文件夹) 的体积有多大</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#22-peerDependency-%E6%98%AF%E4%B8%BA%E4%BA%86%E8%A7%A3%E5%86%B3%E4%BB%80%E4%B9%88%E9%97%AE%E9%A2%98"><span class="toc-number">19.22.</span> <span class="toc-text">22.peerDependency 是为了解决什么问题</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#23-semver-%E6%8C%87%E4%BB%80%E4%B9%88%EF%BC%8C%E8%AF%95%E5%9B%BE%E8%A7%A3%E9%87%8A%E4%B8%80%E4%B8%8B"><span class="toc-number">19.23.</span> <span class="toc-text">23.semver 指什么，试图解释一下</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#24-optionalDependencies-%E7%9A%84%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF%E6%98%AF%E4%BB%80%E4%B9%88"><span class="toc-number">19.24.</span> <span class="toc-text">24.optionalDependencies 的使用场景是什么</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#25-package-lock-json-%E4%B8%8E-yarn-lock-%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB"><span class="toc-number">19.25.</span> <span class="toc-text">25.package-lock.json 与 yarn.lock 有什么区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#26-%E5%A6%82%E4%BD%95%E4%B8%BA%E4%BD%A0%E4%BB%AC%E7%9A%84%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE%E9%80%89%E6%8B%A9%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86%E5%99%A8"><span class="toc-number">19.26.</span> <span class="toc-text">26.如何为你们的前端项目选择状态管理器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#27-%E4%BB%80%E4%B9%88%E6%98%AF%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84%E5%85%B3%E9%94%AE%E6%B8%B2%E6%9F%93%E8%B7%AF%E5%BE%84"><span class="toc-number">19.27.</span> <span class="toc-text">27.什么是浏览器的关键渲染路径</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-DOM"><span class="toc-number">19.27.1.</span> <span class="toc-text">1.DOM</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-CSSOM"><span class="toc-number">19.27.2.</span> <span class="toc-text">2.CSSOM</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-Render-Tree"><span class="toc-number">19.27.3.</span> <span class="toc-text">3.Render Tree</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-Layout"><span class="toc-number">19.27.4.</span> <span class="toc-text">4.Layout</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-Paint"><span class="toc-number">19.27.5.</span> <span class="toc-text">5.Paint</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#28-%E4%BD%A0%E4%BD%BF%E7%94%A8%E8%BF%87%E5%93%AA%E4%BA%9B%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E5%88%86%E6%9E%90%E5%B7%A5%E5%85%B7"><span class="toc-number">19.28.</span> <span class="toc-text">28.你使用过哪些前端性能分析工具</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#29-%E4%BD%A0%E6%9C%89%E6%B2%A1%E6%9C%89%E9%87%8D%E5%AE%A2%E6%88%B7%E7%AB%AF%E7%8A%B6%E6%80%81%E5%89%8D%E7%AB%AF%E5%BA%94%E7%94%A8%E7%9A%84%E7%BB%8F%E9%AA%8C"><span class="toc-number">19.29.</span> <span class="toc-text">29.你有没有重客户端状态前端应用的经验</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#30-%E4%BB%80%E4%B9%88%E6%98%AF%E5%AE%89%E5%85%A8%E7%9A%84%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F"><span class="toc-number">19.30.</span> <span class="toc-text">30.什么是安全的正则表达式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#31-%E5%9C%A8-nginx-%E4%B8%AD%E5%A6%82%E4%BD%95%E9%85%8D%E7%BD%AE%E8%B4%9F%E8%BD%BD%E5%9D%87%E8%A1%A1"><span class="toc-number">19.31.</span> <span class="toc-text">31.在 nginx 中如何配置负载均衡</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-Round-Robin"><span class="toc-number">19.31.1.</span> <span class="toc-text">1.Round_Robin</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-Weighted-Round-Robin"><span class="toc-number">19.31.2.</span> <span class="toc-text">2.Weighted_Round_Robin</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-IP-hash"><span class="toc-number">19.31.3.</span> <span class="toc-text">3.IP_hash</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-Least-Connection"><span class="toc-number">19.31.4.</span> <span class="toc-text">4.Least Connection</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#32-%E5%89%8D%E7%AB%AF%E6%89%93%E5%8C%85%E6%97%B6-cjs%E3%80%81es%E3%80%81umd-%E6%A8%A1%E5%9D%97%E6%9C%89%E4%BD%95%E4%B8%8D%E5%90%8C"><span class="toc-number">19.32.</span> <span class="toc-text">32.前端打包时 cjs、es、umd 模块有何不同</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-cjs-commonjs"><span class="toc-number">19.32.1.</span> <span class="toc-text">1.cjs (commonjs)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-esm-es-module"><span class="toc-number">19.32.2.</span> <span class="toc-text">2.esm (es module)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-umd"><span class="toc-number">19.32.3.</span> <span class="toc-text">3.umd</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#33-%E4%BB%80%E4%B9%88%E6%98%AF%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96"><span class="toc-number">19.33.</span> <span class="toc-text">33.什么是前端工程化</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#34-JWT-%E7%9A%84%E5%8E%9F%E7%90%86%E6%98%AF%E4%BB%80%E4%B9%88"><span class="toc-number">19.34.</span> <span class="toc-text">34.JWT 的原理是什么</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#35-%E4%BB%80%E4%B9%88%E6%98%AF%E6%9C%8D%E5%8A%A1%E5%99%A8%E6%B8%B2%E6%9F%93-SSR"><span class="toc-number">19.35.</span> <span class="toc-text">35.什么是服务器渲染 (SSR)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#36-Core-Web-Vitals-%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%8C%E5%AE%83%E6%9C%89%E5%93%AA%E4%BA%9B%E6%8C%87%E6%A0%87"><span class="toc-number">19.36.</span> <span class="toc-text">36.Core Web Vitals 是什么，它有哪些指标</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#37-dependencies-%E4%B8%8E-devDependencies-%E6%9C%89%E4%BD%95%E5%8C%BA%E5%88%AB"><span class="toc-number">19.37.</span> <span class="toc-text">37.dependencies 与 devDependencies 有何区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#38-%E5%A6%82%E4%BD%95%E7%A1%AE%E8%AE%A4%E4%BD%A0%E4%BB%AC%E9%A1%B9%E7%9B%AE%E6%98%AF%E5%90%A6%E4%BE%9D%E8%B5%96%E6%9F%90%E4%B8%80%E4%B8%AA%E4%BE%9D%E8%B5%96%E9%A1%B9"><span class="toc-number">19.38.</span> <span class="toc-text">38.如何确认你们项目是否依赖某一个依赖项</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#39-%E5%BD%93%E4%BD%A0%E5%BC%95%E5%85%A5%E6%9F%90%E4%B8%80%E4%B8%AA%E4%BE%9D%E8%B5%96%E9%A1%B9%E6%97%B6%EF%BC%8C%E4%BD%A0%E5%BC%95%E5%85%A5%E7%9A%84%E6%98%AF%E8%AF%A5%E4%BE%9D%E8%B5%96%E4%B8%8B%E7%9A%84%E5%93%AA%E4%B8%80%E4%B8%AA%E6%96%87%E4%BB%B6"><span class="toc-number">19.39.</span> <span class="toc-text">39.当你引入某一个依赖项时，你引入的是该依赖下的哪一个文件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#40-npm-workspaces-%E8%A7%A3%E5%86%B3%E4%BA%86%E4%BB%80%E4%B9%88%E9%97%AE%E9%A2%98"><span class="toc-number">19.40.</span> <span class="toc-text">40.npm workspaces 解决了什么问题</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#41-%E5%A6%82%E4%BD%95%E4%B8%BA%E4%B8%80%E4%B8%AA%E9%A1%B9%E7%9B%AE%E6%8C%87%E5%AE%9A-node-%E7%89%88%E6%9C%AC%E5%8F%B7"><span class="toc-number">19.41.</span> <span class="toc-text">41.如何为一个项目指定 node 版本号</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#42-%E4%BB%80%E4%B9%88%E6%98%AF-semver%EF%BC%8C-1-2-3-%E4%B8%8E-1-2-3-%E7%9A%84%E7%89%88%E6%9C%AC%E5%8F%B7%E8%8C%83%E5%9B%B4%E6%98%AF%E5%A4%9A%E5%B0%91"><span class="toc-number">19.42.</span> <span class="toc-text">42.什么是 semver，~1.2.3 与 ^1.2.3 的版本号范围是多少</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#43-package-json-%E4%B8%AD-main-module-browser-exports-%E5%AD%97%E6%AE%B5%E6%9C%89%E4%BD%95%E5%8C%BA%E5%88%AB"><span class="toc-number">19.43.</span> <span class="toc-text">43.package.json 中 main&#x2F;module&#x2F;browser&#x2F;exports 字段有何区别</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-main"><span class="toc-number">19.43.1.</span> <span class="toc-text">1.main</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-module"><span class="toc-number">19.43.2.</span> <span class="toc-text">2.module</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-exports"><span class="toc-number">19.43.3.</span> <span class="toc-text">3.exports</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#44-npm-publish-%E6%97%B6-npm-script-%E7%9A%84%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F"><span class="toc-number">19.44.</span> <span class="toc-text">44.npm publish 时 npm script 的生命周期</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#45-%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE%E6%AF%8F%E6%AC%A1-npm-install-%E4%B9%8B%E5%90%8E%E9%9C%80%E8%A6%81%E6%89%A7%E8%A1%8C%E4%B8%80%E4%BA%9B%E5%A4%84%E7%90%86%E5%B7%A5%E4%BD%9C%EF%BC%8C%E5%BA%94%E8%AF%A5%E6%80%8E%E4%B9%88%E5%8A%9E"><span class="toc-number">19.45.</span> <span class="toc-text">45.前端项目每次 npm install 之后需要执行一些处理工作，应该怎么办</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#46-%E4%BD%A0%E6%98%AF%E5%A6%82%E4%BD%95%E4%BF%9D%E9%9A%9C%E4%BD%A0%E4%BB%AC%E9%A1%B9%E7%9B%AE%E8%B4%A8%E9%87%8F%E7%9A%84"><span class="toc-number">19.46.</span> <span class="toc-text">46.你是如何保障你们项目质量的</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#47-%E5%A6%82%E4%BD%95%E6%AD%A3%E7%A1%AE%E5%BE%97%E7%9F%A5%E6%9F%90%E5%BC%A0%E5%9B%BE%E7%89%87%E7%9A%84-MIME-%E6%A0%BC%E5%BC%8F"><span class="toc-number">19.47.</span> <span class="toc-text">47.如何正确得知某张图片的 MIME 格式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#48-%E7%8E%B0%E4%BB%A3%E5%89%8D%E7%AB%AF%E5%BA%94%E7%94%A8%E5%BA%94%E5%A6%82%E4%BD%95%E9%85%8D%E7%BD%AE-HTTP-%E7%BC%93%E5%AD%98%E6%9C%BA%E5%88%B6"><span class="toc-number">19.48.</span> <span class="toc-text">48.现代前端应用应如何配置 HTTP 缓存机制</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#49-%E4%BD%BF%E7%94%A8-webpack-%E5%A6%82%E4%BD%95%E5%88%86%E5%8C%85"><span class="toc-number">19.49.</span> <span class="toc-text">49.使用 webpack 如何分包</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#50-%E5%BC%95%E5%85%A5-BFF-%E5%B1%82%E7%9A%84%E4%BC%98%E5%8A%BF%E5%9C%A8%E5%93%AA%E9%87%8C"><span class="toc-number">19.50.</span> <span class="toc-text">50.引入 BFF 层的优势在哪里</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#51-%E5%90%8C%E4%B8%80%E9%A1%B5%E9%9D%A2%E4%B8%89%E4%B8%AA%E7%BB%84%E4%BB%B6%E8%AF%B7%E6%B1%82%E5%90%8C%E4%B8%80%E4%B8%AA-API-%E5%8F%91%E9%80%81%E4%BA%86%E4%B8%89%E6%AC%A1%E8%AF%B7%E6%B1%82%EF%BC%8C%E5%A6%82%E4%BD%95%E4%BC%98%E5%8C%96"><span class="toc-number">19.51.</span> <span class="toc-text">51.同一页面三个组件请求同一个 API 发送了三次请求，如何优化</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#52-%E5%A6%82%E4%BD%95%E5%8E%8B%E7%BC%A9%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE%E4%B8%AD-JS-%E7%9A%84%E4%BD%93%E7%A7%AF"><span class="toc-number">19.52.</span> <span class="toc-text">52.如何压缩前端项目中 JS 的体积</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#53-%E4%BD%A0%E4%BB%AC%E9%A1%B9%E7%9B%AE%E4%B8%AD%E4%BD%BF%E7%94%A8%E4%BA%86%E5%93%AA%E4%BA%9B%E4%BE%9D%E8%B5%96-%E7%AC%AC%E4%B8%89%E6%96%B9%E5%BA%93"><span class="toc-number">19.53.</span> <span class="toc-text">53.你们项目中使用了哪些依赖&#x2F;第三方库</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#54-%E5%A6%82%E4%BD%95%E7%A6%81%E6%AD%A2%E6%89%93%E5%BC%80%E6%B5%8F%E8%A7%88%E5%99%A8%E6%8E%A7%E5%88%B6%E5%8F%B0"><span class="toc-number">19.54.</span> <span class="toc-text">54.如何禁止打开浏览器控制台</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#55-%E5%A6%82%E4%BD%95%E6%8F%90%E9%AB%98%E9%A6%96%E5%B1%8F%E6%B8%B2%E6%9F%93%E6%97%B6%E9%97%B4%EF%BC%9F"><span class="toc-number">19.55.</span> <span class="toc-text">55.如何提高首屏渲染时间？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#56-npm-%E6%89%A7%E8%A1%8C%E5%91%BD%E4%BB%A4%E4%BC%A0%E9%80%92%E5%8F%82%E6%95%B0%E6%97%B6%EF%BC%8C%E4%B8%BA%E4%BD%95%E9%9C%80%E8%A6%81%E5%8F%8C%E6%A8%AA%E7%BA%BF"><span class="toc-number">19.56.</span> <span class="toc-text">56.npm 执行命令传递参数时，为何需要双横线</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#57-http-client-%E4%B8%AD%E5%A6%82%E4%BD%95%E5%BE%97%E7%9F%A5%E5%B7%B2%E6%8E%A5%E6%94%B6%E5%AE%8C%E6%89%80%E6%9C%89%E5%93%8D%E5%BA%94%E6%95%B0%E6%8D%AE"><span class="toc-number">19.57.</span> <span class="toc-text">57.http client 中如何得知已接收完所有响应数据</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#58-core-js-%E6%98%AF%E5%81%9A%E4%BB%80%E4%B9%88%E7%94%A8%E7%9A%84%EF%BC%9F"><span class="toc-number">19.58.</span> <span class="toc-text">58.core-js 是做什么用的？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#59-%E5%A6%82%E4%BD%95%E5%A4%84%E7%90%86%E7%99%BD%E5%B1%8F%E9%94%99%E8%AF%AF%E9%A1%B5%E7%9A%84%E7%9B%91%E6%8E%A7%E7%9A%84%EF%BC%9F"><span class="toc-number">19.59.</span> <span class="toc-text">59.如何处理白屏错误页的监控的？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#60-%E7%AE%80%E8%BF%B0-npm-script-%E7%9A%84%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F"><span class="toc-number">19.60.</span> <span class="toc-text">60.简述 npm script 的生命周期</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E4%B8%80%E4%B8%AA-npm-script-%E7%9A%84%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F"><span class="toc-number">19.60.1.</span> <span class="toc-text">1.一个 npm script 的生命周期</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E4%B8%80%E4%B8%AA%E6%9C%80%E5%B8%B8%E7%94%A8%E7%9A%84%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F"><span class="toc-number">19.60.2.</span> <span class="toc-text">2.一个最常用的生命周期</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-npm-script-%E9%92%A9%E5%AD%90%E7%9A%84%E9%A3%8E%E9%99%A9"><span class="toc-number">19.60.3.</span> <span class="toc-text">3.npm script 钩子的风险</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#61-git-hooks-%E5%8E%9F%E7%90%86%E6%98%AF%E4%BB%80%E4%B9%88"><span class="toc-number">19.61.</span> <span class="toc-text">61.git hooks 原理是什么</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#62-%E8%AF%B7%E7%AE%80%E8%BF%B0%E4%B8%8B-eslint-%E7%9A%84%E4%BD%9C%E7%94%A8"><span class="toc-number">19.62.</span> <span class="toc-text">62.请简述下 eslint 的作用</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-Rule"><span class="toc-number">19.62.1.</span> <span class="toc-text">1.Rule</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-Plugin"><span class="toc-number">19.62.2.</span> <span class="toc-text">2.Plugin</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-Config"><span class="toc-number">19.62.3.</span> <span class="toc-text">3.Config</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#63-%E5%9C%A8%E9%A1%B9%E7%9B%AE%E4%B8%AD%EF%BC%8C%E5%A6%82%E4%BD%95%E5%B9%B3%E6%BB%91%E5%8D%87%E7%BA%A7-npm-%E5%8C%85"><span class="toc-number">19.63.</span> <span class="toc-text">63.在项目中，如何平滑升级 npm 包</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E8%87%AA%E5%8A%A8%E5%8F%91%E7%8E%B0%E6%9B%B4%E6%96%B0"><span class="toc-number">19.63.1.</span> <span class="toc-text">1.自动发现更新</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E8%87%AA%E5%8A%A8%E6%9B%B4%E6%96%B0%E7%89%88%E6%9C%AC%E5%8F%B7"><span class="toc-number">19.63.2.</span> <span class="toc-text">2.自动更新版本号</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E4%B8%80%E7%82%B9%E5%B0%8F%E5%BB%BA%E8%AE%AE"><span class="toc-number">19.63.3.</span> <span class="toc-text">3.一点小建议</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#64-%E8%AF%B7%E6%8F%8F%E8%BF%B0-node-modules-%E7%9A%84%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84-%E6%8B%93%E6%89%91%E7%BB%93%E6%9E%84"><span class="toc-number">19.64.</span> <span class="toc-text">64.请描述 node_modules 的目录结构(拓扑结构)</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E5%9F%BA%E7%A1%80"><span class="toc-number">19.64.1.</span> <span class="toc-text">1.基础</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E5%BE%88%E4%B9%85%E4%BB%A5%E5%89%8D-%E5%B5%8C%E5%A5%97%E7%BB%93%E6%9E%84"><span class="toc-number">19.64.2.</span> <span class="toc-text">2.很久以前: 嵌套结构</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E7%8E%B0%E5%9C%A8%E9%98%B6%E6%AE%B5-%E5%B9%B3%E9%93%BA%E7%BB%93%E6%9E%84"><span class="toc-number">19.64.3.</span> <span class="toc-text">3.现在阶段: 平铺结构</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-%E9%87%8D%E5%A4%8D%E7%9A%84%E7%89%88%E6%9C%AC%E4%BE%9D%E8%B5%96%E6%9C%89%E4%BB%80%E4%B9%88%E9%97%AE%E9%A2%98%EF%BC%9F"><span class="toc-number">19.64.4.</span> <span class="toc-text">4.重复的版本依赖有什么问题？</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#65-npm-%E7%AC%AC%E4%B8%89%E6%96%B9%E5%BA%93%E9%9C%80%E8%A6%81%E6%8F%90%E4%BA%A4-lockfile-%E5%90%97"><span class="toc-number">19.65.</span> <span class="toc-text">65.npm 第三方库需要提交 lockfile 吗</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E4%B8%BA%E4%BD%95%E6%9C%89%E4%BA%BA%E8%AF%B4%E7%AC%AC%E4%B8%89%E6%96%B9%E5%BA%93%E4%B8%8D%E9%9C%80%E8%A6%81%E6%8F%90%E4%BA%A4-package-lock-json-yarn-lock%EF%BC%9F"><span class="toc-number">19.65.1.</span> <span class="toc-text">1.为何有人说第三方库不需要提交 package-lock.json&#x2F;yarn.lock？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E7%AC%AC%E4%B8%89%E6%96%B9%E5%BA%93%E5%A6%82%E4%BD%95%E8%A7%A3%E5%86%B3%E6%BD%9C%E5%9C%A8%E7%9A%84%E9%97%B4%E6%8E%A5%E4%BE%9D%E8%B5%96%E4%B8%8D%E5%8F%AF%E6%8E%A7%E9%97%AE%E9%A2%98"><span class="toc-number">19.65.2.</span> <span class="toc-text">2.第三方库如何解决潜在的间接依赖不可控问题</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E6%80%BB%E7%BB%93"><span class="toc-number">19.65.3.</span> <span class="toc-text">3.总结</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#66-%E8%AF%B7%E9%97%AE%E4%BB%80%E4%B9%88%E6%98%AF-CICD"><span class="toc-number">19.66.</span> <span class="toc-text">66.请问什么是 CICD</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-CICD-%E5%B7%A5%E5%85%B7"><span class="toc-number">19.66.1.</span> <span class="toc-text">1.CICD 工具</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E4%B8%80%E6%AE%B5%E7%AE%80%E5%8D%95%E7%9A%84-CICD-%E9%85%8D%E7%BD%AE"><span class="toc-number">19.66.2.</span> <span class="toc-text">2.一段简单的 CICD 配置</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#67-%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8-docker-%E9%83%A8%E7%BD%B2%E5%89%8D%E7%AB%AF"><span class="toc-number">19.67.</span> <span class="toc-text">67.如何使用 docker 部署前端</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#68-pnpm-%E6%9C%89%E4%BB%80%E4%B9%88%E4%BC%98%E5%8A%BF"><span class="toc-number">19.68.</span> <span class="toc-text">68.pnpm 有什么优势</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E8%BD%AF%E9%93%BE%E6%8E%A5%E5%92%8C%E7%A1%AC%E9%93%BE%E6%8E%A5"><span class="toc-number">19.68.1.</span> <span class="toc-text">1.软链接和硬链接</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-pnpm-%E4%B8%BA%E4%BD%95%E8%8A%82%E7%9C%81%E7%A9%BA%E9%97%B4"><span class="toc-number">19.68.2.</span> <span class="toc-text">2.pnpm 为何节省空间</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#69-%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%AD%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8%E5%8E%9F%E7%94%9F%E7%9A%84-ESM"><span class="toc-number">19.69.</span> <span class="toc-text">69.浏览器中如何使用原生的 ESM</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-Native-Import-Import-from-URL"><span class="toc-number">19.69.1.</span> <span class="toc-text">1.Native Import: Import from URL</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-ImportMap"><span class="toc-number">19.69.2.</span> <span class="toc-text">2.ImportMap</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-Import-Assertion"><span class="toc-number">19.69.3.</span> <span class="toc-text">3.Import Assertion</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#70-%E5%A6%82%E4%BD%95%E5%B0%86-CommonJS-%E8%BD%AC%E5%8C%96%E4%B8%BA-ESM"><span class="toc-number">19.70.</span> <span class="toc-text">70.如何将 CommonJS 转化为 ESM</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-ESM-%E4%B8%8E-CommonJS-%E7%9A%84%E5%AF%BC%E5%85%A5%E5%AF%BC%E5%87%BA%E7%9A%84%E4%B8%8D%E5%90%8C"><span class="toc-number">19.70.1.</span> <span class="toc-text">1.ESM 与 CommonJS 的导入导出的不同</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-exports-%E7%9A%84%E8%BD%AC%E5%8C%96"><span class="toc-number">19.70.2.</span> <span class="toc-text">2.exports 的转化</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-module-exports-%E7%9A%84%E8%BD%AC%E5%8C%96"><span class="toc-number">19.70.3.</span> <span class="toc-text">3.module.exports 的转化</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-%E4%B8%80%E4%BA%9B%E5%A4%8D%E6%9D%82%E7%9A%84%E8%BD%AC%E5%8C%96"><span class="toc-number">19.70.4.</span> <span class="toc-text">4.一些复杂的转化</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-CommonJS-To-ESM-%E7%9A%84%E6%9E%84%E5%BB%BA%E5%B7%A5%E5%85%B7"><span class="toc-number">19.70.5.</span> <span class="toc-text">5.CommonJS To ESM 的构建工具</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#71-%E5%A6%82%E4%BD%95%E5%AF%B9-npm-package-%E8%BF%9B%E8%A1%8C%E5%8F%91%E5%8C%85"><span class="toc-number">19.71.</span> <span class="toc-text">71.如何对 npm package 进行发包</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E5%87%86%E5%A4%87%E5%B7%A5%E4%BD%9C%EF%BC%9A%E4%B8%80%E4%B8%AA%E8%B4%A6%E5%8F%B7"><span class="toc-number">19.71.1.</span> <span class="toc-text">1.准备工作：一个账号</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E5%8F%91%E5%8C%85"><span class="toc-number">19.71.2.</span> <span class="toc-text">2.发包</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E5%AE%9E%E9%99%85%E5%8F%91%E5%8C%85%E7%9A%84%E5%86%85%E5%AE%B9"><span class="toc-number">19.71.3.</span> <span class="toc-text">3.实际发包的内容</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-%E5%8F%91%E5%8C%85%E7%9A%84%E5%AE%9E%E9%99%85%E6%B5%81%E7%A8%8B"><span class="toc-number">19.71.4.</span> <span class="toc-text">4.发包的实际流程</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#72-%E4%BB%80%E4%B9%88%E6%98%AF-AST%EF%BC%8C%E5%8F%8A%E5%85%B6%E5%BA%94%E7%94%A8"><span class="toc-number">19.72.</span> <span class="toc-text">72.什么是 AST，及其应用</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-AST-%E7%9A%84%E7%94%9F%E6%88%90"><span class="toc-number">19.72.1.</span> <span class="toc-text">1.AST 的生成</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E5%AE%9E%E8%B7%B5"><span class="toc-number">19.72.2.</span> <span class="toc-text">2.实践</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#73-%E7%AE%80%E8%BF%B0-browserslist-%E7%9A%84%E6%84%8F%E4%B9%89"><span class="toc-number">19.73.</span> <span class="toc-text">73.简述 browserslist 的意义</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E5%8E%9F%E7%90%86"><span class="toc-number">19.73.1.</span> <span class="toc-text">1.原理</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E4%B8%80%E4%BA%9B%E5%B8%B8%E7%94%A8%E7%9A%84%E6%9F%A5%E8%AF%A2%E8%AF%AD%E6%B3%95"><span class="toc-number">19.73.2.</span> <span class="toc-text">2.一些常用的查询语法</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#74-%E7%AE%80%E8%BF%B0-bundless-%E7%9A%84%E4%BC%98%E5%8A%BF%E4%B8%8E%E4%B8%8D%E8%B6%B3"><span class="toc-number">19.74.</span> <span class="toc-text">74.简述 bundless 的优势与不足</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#75-%E7%AE%80%E8%BF%B0-npm-cache"><span class="toc-number">19.75.</span> <span class="toc-text">75.简述 npm cache</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#76-%E5%A6%82%E4%BD%95%E4%BF%AE%E5%A4%8D%E6%9F%90%E4%B8%AA-npm-%E5%8C%85%E7%9A%84%E7%B4%A7%E6%80%A5-bug"><span class="toc-number">19.76.</span> <span class="toc-text">76.如何修复某个 npm 包的紧急 bug</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-patch-package"><span class="toc-number">19.76.1.</span> <span class="toc-text">1.patch-package</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#77-%E5%89%8D%E7%AB%AF%E5%A6%82%E4%BD%95%E8%BF%9B%E8%A1%8C%E9%AB%98%E6%95%88%E7%9A%84%E5%88%86%E5%8C%85"><span class="toc-number">19.77.</span> <span class="toc-text">77.前端如何进行高效的分包</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E4%B8%BA%E4%BB%80%E4%B9%88%E9%9C%80%E8%A6%81%E5%88%86%E5%8C%85%EF%BC%9F"><span class="toc-number">19.77.1.</span> <span class="toc-text">1.为什么需要分包？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E5%A6%82%E4%BD%95%E6%9B%B4%E5%A5%BD%E7%9A%84%E5%88%86%E5%8C%85%EF%BC%9F"><span class="toc-number">19.77.2.</span> <span class="toc-text">2.如何更好的分包？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E4%BD%BF%E7%94%A8-webpack-%E5%88%86%E5%8C%85"><span class="toc-number">19.77.3.</span> <span class="toc-text">3.使用 webpack 分包</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#78-%E5%89%8D%E7%AB%AF%E5%A6%82%E4%BD%95%E5%AF%B9%E5%88%86%E6%94%AF%E7%8E%AF%E5%A2%83%E8%BF%9B%E8%A1%8C%E9%83%A8%E7%BD%B2"><span class="toc-number">19.78.</span> <span class="toc-text">78.前端如何对分支环境进行部署</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#79-vite-%E4%B8%AD%E6%98%AF%E5%A6%82%E4%BD%95%E5%A4%84%E7%90%86-new-URL-%E8%B5%84%E6%BA%90%E7%9A%84"><span class="toc-number">19.79.</span> <span class="toc-text">79.vite 中是如何处理 new URL 资源的</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#webpack-%E5%85%B121%E9%A2%98"><span class="toc-number">20.</span> <span class="toc-text">webpack 共21题</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-webpack-%E6%98%AF%E7%94%A8%E6%9D%A5%E5%81%9A%E4%BB%80%E4%B9%88%E7%9A%84%EF%BC%8C%E5%8E%9F%E7%90%86%E6%98%AF%E4%BB%80%E4%B9%88"><span class="toc-number">20.1.</span> <span class="toc-text">1.webpack 是用来做什么的，原理是什么</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-webpack-%E4%B8%AD%E7%9A%84-loader-%E7%9A%84%E4%BD%9C%E7%94%A8%E6%98%AF%E4%BB%80%E4%B9%88"><span class="toc-number">20.2.</span> <span class="toc-text">2.webpack 中的 loader 的作用是什么</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-%E6%9C%89%E6%B2%A1%E6%9C%89%E8%87%AA%E5%B7%B1%E5%86%99%E8%BF%87%E4%B8%80%E4%B8%AA-webpack-%E7%9A%84-loader"><span class="toc-number">20.3.</span> <span class="toc-text">3.有没有自己写过一个 webpack 的 loader</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-webpack-%E4%B8%AD-plugin-%E7%9A%84%E4%BD%9C%E7%94%A8%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%8C%E6%9C%89%E6%B2%A1%E6%9C%89%E8%87%AA%E5%B7%B1%E5%86%99%E8%BF%87"><span class="toc-number">20.4.</span> <span class="toc-text">4.webpack 中 plugin 的作用是什么，有没有自己写过</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-%E4%BD%BF%E7%94%A8-webpack-%E6%97%B6%E5%A6%82%E4%BD%95%E4%BC%98%E5%8C%96%E9%A1%B9%E7%9B%AE%E4%BD%93%E7%A7%AF"><span class="toc-number">20.5.</span> <span class="toc-text">4.使用 webpack 时如何优化项目体积</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-webpack-%E4%B8%AD%E4%BB%80%E4%B9%88%E6%98%AF-HMR%EF%BC%8C%E5%8E%9F%E7%90%86%E6%98%AF%E4%BB%80%E4%B9%88"><span class="toc-number">20.6.</span> <span class="toc-text">5.webpack 中什么是 HMR，原理是什么</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-%E4%BD%BF%E7%94%A8-webpack-%E6%89%93%E5%8C%85%E6%97%B6%EF%BC%8C%E5%A6%82%E4%BD%95%E6%9B%B4%E5%A5%BD%E5%9C%B0%E5%88%A9%E7%94%A8-long-term-cache"><span class="toc-number">20.7.</span> <span class="toc-text">6.使用 webpack 打包时，如何更好地利用 long term cache</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E4%B8%80%E4%B8%AA%E9%97%AE%E9%A2%98%E4%B8%8E%E6%9B%B4%E5%BC%BA%E7%9A%84%E6%B0%B8%E4%B9%85%E7%BC%93%E5%AD%98"><span class="toc-number">20.7.1.</span> <span class="toc-text">1.一个问题与更强的永久缓存</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#7-%E9%9A%8F%E7%9D%80-http2-%E7%9A%84%E5%8F%91%E5%B1%95%EF%BC%8Cwebpack-%E6%9C%89%E6%B2%A1%E6%9C%89%E6%9B%B4%E5%A5%BD%E7%9A%84%E6%89%93%E5%8C%85%E6%96%B9%E6%A1%88"><span class="toc-number">20.8.</span> <span class="toc-text">7.随着 http2 的发展，webpack 有没有更好的打包方案</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#8-Tree-Shaking-%E7%9A%84%E5%8E%9F%E7%90%86%E6%98%AF%E4%BB%80%E4%B9%88"><span class="toc-number">20.9.</span> <span class="toc-text">8.Tree Shaking 的原理是什么</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-import"><span class="toc-number">20.9.1.</span> <span class="toc-text">1.import *</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-JSON-TreeShaking"><span class="toc-number">20.9.2.</span> <span class="toc-text">2.JSON TreeShaking</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E5%BC%95%E5%85%A5%E6%94%AF%E6%8C%81-Tree-Shaking-%E7%9A%84-Package"><span class="toc-number">20.9.3.</span> <span class="toc-text">3.引入支持 Tree Shaking 的 Package</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#9-vue-loader-%E7%9A%84%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%E6%98%AF%E4%BB%80%E4%B9%88"><span class="toc-number">20.10.</span> <span class="toc-text">9.vue-loader 的实现原理是什么</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#10-%E5%AF%B9%E4%BA%8E%E5%B7%B2%E7%BB%8F-import-%E4%BD%86%E6%9C%AA%E5%AE%9E%E9%99%85%E4%BD%BF%E7%94%A8%E7%9A%84%E6%A8%A1%E5%9D%97%E4%BD%BF%E7%94%A8-webpack-%E8%BF%98%E4%BC%9A%E5%AF%B9%E5%AE%83%E6%89%93%E5%8C%85%E5%90%97%EF%BC%9F"><span class="toc-number">20.11.</span> <span class="toc-text">10.对于已经 import 但未实际使用的模块使用 webpack 还会对它打包吗？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#11-Code-Splitting-%E7%9A%84%E5%8E%9F%E7%90%86%E6%98%AF%E4%BB%80%E4%B9%88"><span class="toc-number">20.12.</span> <span class="toc-text">11.Code Splitting 的原理是什么</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#12-%E4%BD%BF%E7%94%A8-webpack-%E5%A6%82%E4%BD%95%E5%88%86%E5%8C%85"><span class="toc-number">20.13.</span> <span class="toc-text">12.使用 webpack 如何分包</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#13-%E5%A6%82%E4%BD%95%E5%8E%8B%E7%BC%A9%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE%E4%B8%AD-JS-%E7%9A%84%E4%BD%93%E7%A7%AF"><span class="toc-number">20.14.</span> <span class="toc-text">13.如何压缩前端项目中 JS 的体积</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#14-webpack-%E7%9A%84-runtime-%E5%81%9A%E4%BA%86%E4%BB%80%E4%B9%88%E4%BA%8B%E6%83%85"><span class="toc-number">20.15.</span> <span class="toc-text">14.webpack 的 runtime 做了什么事情</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-Webpack-Runtime"><span class="toc-number">20.15.1.</span> <span class="toc-text">1.Webpack Runtime</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-Rollup"><span class="toc-number">20.15.2.</span> <span class="toc-text">2.Rollup</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#15-webpack-%E4%B8%AD%E7%9A%84-code-spliting-%E6%98%AF%E5%A6%82%E4%BD%95%E5%8A%A8%E6%80%81%E5%8A%A0%E8%BD%BD-chunk-%E7%9A%84%EF%BC%9F"><span class="toc-number">20.16.</span> <span class="toc-text">15.webpack 中的 code spliting 是如何动态加载 chunk 的？</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-code-spliting"><span class="toc-number">20.16.1.</span> <span class="toc-text">1.code spliting</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E8%BF%90%E8%A1%8C%E6%97%B6%E8%A7%A3%E6%9E%90"><span class="toc-number">20.16.2.</span> <span class="toc-text">2.运行时解析</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#16-%E6%89%93%E5%8C%85%E5%99%A8-webpack-rollup-%E5%A6%82%E4%BD%95%E5%B0%86%E6%89%93%E5%8C%85%E5%90%8E%E7%9A%84-js-%E8%B5%84%E6%BA%90%E6%B3%A8%E5%85%A5-html-%E4%B8%AD"><span class="toc-number">20.17.</span> <span class="toc-text">16.打包器(webpack&#x2F;rollup) 如何将打包后的 js 资源注入 html 中</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#17-%E6%89%93%E5%8C%85%E5%99%A8-webpack-rollup-%E5%A6%82%E4%BD%95%E5%8A%A0%E8%BD%BD-json%E3%80%81image-%E7%AD%89%E9%9D%9E-Javascript-%E8%B5%84%E6%BA%90"><span class="toc-number">20.18.</span> <span class="toc-text">17.打包器(webpack&#x2F;rollup) 如何加载 json、image 等非 Javascript 资源</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E5%8A%A0%E8%BD%BD-JSON"><span class="toc-number">20.18.1.</span> <span class="toc-text">1.加载 JSON</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E5%8A%A0%E8%BD%BD%E5%9B%BE%E7%89%87"><span class="toc-number">20.18.2.</span> <span class="toc-text">2.加载图片</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#18-%E6%89%93%E5%8C%85%E5%99%A8-webpack-rollup-%E5%A6%82%E4%BD%95%E5%8A%A0%E8%BD%BD-style-%E6%A0%B7%E5%BC%8F%E8%B5%84%E6%BA%90"><span class="toc-number">20.19.</span> <span class="toc-text">18.打包器(webpack&#x2F;rollup) 如何加载 style 样式资源</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E7%8E%B0%E7%8A%B6"><span class="toc-number">20.19.1.</span> <span class="toc-text">1.现状</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E5%8E%9F%E7%90%86"><span class="toc-number">20.19.2.</span> <span class="toc-text">2.原理</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#19-%E5%A6%82%E4%BD%95%E6%8F%90%E5%8D%87-webpack-%E6%9E%84%E5%BB%BA%E8%B5%84%E6%BA%90%E7%9A%84%E9%80%9F%E5%BA%A6"><span class="toc-number">20.20.</span> <span class="toc-text">19.如何提升 webpack 构建资源的速度</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E6%9B%B4%E5%BF%AB%E7%9A%84-loader-swc"><span class="toc-number">20.20.1.</span> <span class="toc-text">1.更快的 loader: swc</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E6%8C%81%E4%B9%85%E5%8C%96%E7%BC%93%E5%AD%98-cache"><span class="toc-number">20.20.2.</span> <span class="toc-text">2.持久化缓存: cache</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E5%A4%9A%E8%BF%9B%E7%A8%8B-thread-loader"><span class="toc-number">20.20.3.</span> <span class="toc-text">3.多进程: thread-loader</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#20-%E5%A6%82%E4%BD%95%E5%88%86%E6%9E%90%E5%89%8D%E7%AB%AF%E6%89%93%E5%8C%85%E4%BD%93%E7%A7%AF"><span class="toc-number">20.21.</span> <span class="toc-text">20.如何分析前端打包体积</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-ANALYZE-%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F"><span class="toc-number">20.21.1.</span> <span class="toc-text">1.ANALYZE 环境变量</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#21-webpack-%E4%B8%AD%E6%98%AF%E5%A6%82%E4%BD%95%E5%A4%84%E7%90%86-new-URL-%E8%B5%84%E6%BA%90%E7%9A%84"><span class="toc-number">20.22.</span> <span class="toc-text">21.webpack 中是如何处理 new URL 资源的</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E9%AB%98%E9%A2%91%E6%89%8B%E5%86%99%E4%BB%A3%E7%A0%81"><span class="toc-number">21.</span> <span class="toc-text">高频手写代码</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-%E4%BB%80%E4%B9%88%E6%98%AF%E9%98%B2%E6%8A%96%E5%92%8C%E8%8A%82%E6%B5%81%EF%BC%8C%E4%BB%96%E4%BB%AC%E7%9A%84%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF%E6%9C%89%E5%93%AA%E4%BA%9B"><span class="toc-number">21.1.</span> <span class="toc-text">1.什么是防抖和节流，他们的应用场景有哪些</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E9%98%B2%E6%8A%96-debounce"><span class="toc-number">21.1.1.</span> <span class="toc-text">1.防抖 (debounce)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E8%8A%82%E6%B5%81-throttle"><span class="toc-number">21.1.2.</span> <span class="toc-text">2.节流 (throttle)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E6%80%BB%E7%BB%93-%E7%AE%80%E8%A6%81%E7%AD%94%E6%A1%88"><span class="toc-number">21.1.3.</span> <span class="toc-text">3.总结 (简要答案)</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E7%AE%80%E5%8D%95%E7%9A%84-Promise"><span class="toc-number">21.2.</span> <span class="toc-text">2.如何实现一个简单的 Promise</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-js-%E4%B8%AD%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0-bind"><span class="toc-number">21.3.</span> <span class="toc-text">3.js 中如何实现 bind</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0-promise-map%EF%BC%8C%E9%99%90%E5%88%B6-promise-%E5%B9%B6%E5%8F%91%E6%95%B0"><span class="toc-number">21.4.</span> <span class="toc-text">4.如何实现 promise.map，限制 promise 并发数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E7%B1%BB%E4%BC%BC-lodash-get-%E5%87%BD%E6%95%B0"><span class="toc-number">21.5.</span> <span class="toc-text">5.如何实现类似 lodash.get 函数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E6%B7%B1%E6%8B%B7%E8%B4%9D-cloneDeep"><span class="toc-number">21.6.</span> <span class="toc-text">6.如何实现一个深拷贝 (cloneDeep)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#7-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA-flatMap-%E5%87%BD%E6%95%B0-%E5%A4%B4%E6%9D%A1"><span class="toc-number">21.7.</span> <span class="toc-text">7.如何实现一个 flatMap 函数 (头条)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#8-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA-async-await"><span class="toc-number">21.8.</span> <span class="toc-text">8.如何实现一个 async&#x2F;await</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#9-%E4%BD%BF%E7%94%A8-js-%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA-lru-cache"><span class="toc-number">21.9.</span> <span class="toc-text">9.使用 js 实现一个 lru cache</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#10-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0-Promise-race"><span class="toc-number">21.10.</span> <span class="toc-text">10.如何实现 Promise.race</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#11-%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA-once-%E5%87%BD%E6%95%B0%EF%BC%8C%E8%AE%B0%E5%BF%86%E8%BF%94%E5%9B%9E%E7%BB%93%E6%9E%9C%E5%8F%AA%E6%89%A7%E8%A1%8C%E4%B8%80%E6%AC%A1"><span class="toc-number">21.11.</span> <span class="toc-text">11.实现一个 once 函数，记忆返回结果只执行一次</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#12-%E5%A6%82%E4%BD%95%E6%89%BE%E5%88%B0%E5%BD%93%E5%89%8D%E9%A1%B5%E9%9D%A2%E5%87%BA%E7%8E%B0%E6%AC%A1%E6%95%B0%E6%9C%80%E5%A4%9A%E7%9A%84-HTML-%E6%A0%87%E7%AD%BE"><span class="toc-number">21.12.</span> <span class="toc-text">12.如何找到当前页面出现次数最多的 HTML 标签</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#13-%E5%AF%B9%E4%BB%A5%E4%B8%8B%E5%AD%97%E7%AC%A6%E4%B8%B2%E8%BF%9B%E8%A1%8C%E5%8E%8B%E7%BC%A9%E7%BC%96%E7%A0%81"><span class="toc-number">21.13.</span> <span class="toc-text">13.对以下字符串进行压缩编码</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#14-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E6%97%A0%E9%99%90%E7%B4%AF%E5%8A%A0%E7%9A%84-sum-%E5%87%BD%E6%95%B0"><span class="toc-number">21.14.</span> <span class="toc-text">14.如何实现一个无限累加的 sum 函数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#15-%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E5%87%BD%E6%95%B0%E7%94%A8%E6%9D%A5%E8%A7%A3%E6%9E%90-URL-%E7%9A%84-querystring"><span class="toc-number">21.15.</span> <span class="toc-text">15.实现一个函数用来解析 URL 的 querystring</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#16-JS-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA-sleep-delay-%E5%87%BD%E6%95%B0"><span class="toc-number">21.16.</span> <span class="toc-text">16.JS 如何实现一个 sleep&#x2F;delay 函数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#17-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA-sample-%E5%87%BD%E6%95%B0%EF%BC%8C%E4%BB%8E%E6%95%B0%E7%BB%84%E4%B8%AD%E9%9A%8F%E6%9C%BA%E5%8F%96%E4%B8%80%E4%B8%AA%E5%85%83%E7%B4%A0"><span class="toc-number">21.17.</span> <span class="toc-text">17.如何实现一个 sample 函数，从数组中随机取一个元素</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#18-JSONP-%E7%9A%84%E5%8E%9F%E7%90%86%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%8C%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0"><span class="toc-number">21.18.</span> <span class="toc-text">18.JSONP 的原理是什么，如何实现</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E4%B8%80%E4%B8%AA%E6%AD%A3%E5%B8%B8%E7%9A%84%E8%AF%B7%E6%B1%82-JSON-1"><span class="toc-number">21.18.1.</span> <span class="toc-text">1.一个正常的请求: JSON</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E4%B8%80%E4%B8%AA-JSONP-%E8%AF%B7%E6%B1%82-1"><span class="toc-number">21.18.2.</span> <span class="toc-text">2.一个 JSONP 请求</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AB%AF%E4%BB%A3%E7%A0%81-1"><span class="toc-number">21.18.3.</span> <span class="toc-text">3.服务器端代码</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#4-%E5%AE%8C%E6%95%B4%E4%BB%A3%E7%A0%81%E9%99%84%E5%BD%95-1"><span class="toc-number">21.18.3.1.</span> <span class="toc-text">4.完整代码附录</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#19-%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E5%87%BD%E6%95%B0%E7%94%A8%E6%9D%A5%E5%AF%B9-URL-%E7%9A%84-querystring-%E8%BF%9B%E8%A1%8C%E7%BC%96%E7%A0%81"><span class="toc-number">21.19.</span> <span class="toc-text">19.实现一个函数用来对 URL 的 querystring 进行编码</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#20-%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E6%95%B0%E7%BB%84%E6%89%81%E5%B9%B3%E5%8C%96%E7%9A%84%E5%87%BD%E6%95%B0-flatten"><span class="toc-number">21.20.</span> <span class="toc-text">20.实现一个数组扁平化的函数 flatten</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#21-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E6%95%B0%E7%BB%84%E6%B4%97%E7%89%8C%E5%87%BD%E6%95%B0-shuffle"><span class="toc-number">21.21.</span> <span class="toc-text">21.如何实现一个数组洗牌函数 shuffle</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#22-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E5%87%BD%E6%95%B0-lodash-merge"><span class="toc-number">21.22.</span> <span class="toc-text">22.如何实现一个函数 lodash.merge</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#23-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA-Promise-all"><span class="toc-number">21.23.</span> <span class="toc-text">23.如何实现一个 Promise.all</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#24-%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA-inherits-%E5%87%BD%E6%95%B0%E8%BF%9B%E8%A1%8C%E7%BB%A7%E6%89%BF"><span class="toc-number">21.24.</span> <span class="toc-text">24.实现一个 inherits 函数进行继承</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#25-%E5%A6%82%E4%BD%95%E9%80%86%E5%BA%8F%E4%B8%80%E4%B8%AA%E5%AD%97%E7%AC%A6%E4%B8%B2"><span class="toc-number">21.25.</span> <span class="toc-text">25.如何逆序一个字符串</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#26-%E7%BB%99%E6%95%B0%E5%AD%97%E6%B7%BB%E5%8A%A0%E5%8D%83%E4%BD%8D%E7%AC%A6"><span class="toc-number">21.26.</span> <span class="toc-text">26.给数字添加千位符</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#27-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E6%B7%B1%E6%AF%94%E8%BE%83%E7%9A%84%E5%87%BD%E6%95%B0-deepEqual"><span class="toc-number">21.27.</span> <span class="toc-text">27.如何实现一个深比较的函数 deepEqual</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#28-%E5%9C%A8-JS-%E4%B8%AD%E5%A6%82%E4%BD%95%E7%9B%91%E5%90%AC-Object-%E6%9F%90%E4%B8%AA%E5%B1%9E%E6%80%A7%E5%80%BC%E7%9A%84%E5%8F%98%E5%8C%96"><span class="toc-number">21.28.</span> <span class="toc-text">28.在 JS 中如何监听 Object 某个属性值的变化</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-Proxy"><span class="toc-number">21.28.1.</span> <span class="toc-text">1.Proxy</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-Object-defineProperty"><span class="toc-number">21.28.2.</span> <span class="toc-text">2.Object.defineProperty</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#29-%E5%85%B3%E4%BA%8E%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%BC%96%E7%A0%81%E8%A7%A3%E7%A0%81%E8%BF%9B%E9%98%B6"><span class="toc-number">21.29.</span> <span class="toc-text">29.关于字符串编码解码进阶</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#30-%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8-JS-%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E5%8F%91%E5%B8%83%E8%AE%A2%E9%98%85%E6%A8%A1%E5%BC%8F"><span class="toc-number">21.30.</span> <span class="toc-text">30.如何使用 JS 实现一个发布订阅模式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#31-%E4%BD%BF%E7%94%A8-JS-%E5%A6%82%E4%BD%95%E7%94%9F%E6%88%90%E4%B8%80%E4%B8%AA%E9%9A%8F%E6%9C%BA%E5%AD%97%E7%AC%A6%E4%B8%B2"><span class="toc-number">21.31.</span> <span class="toc-text">31.使用 JS 如何生成一个随机字符串</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#32-%E5%A6%82%E4%BD%95%E5%88%A4%E6%96%AD%E4%B8%80%E4%B8%AA%E6%95%B0%E5%80%BC%E4%B8%BA%E6%95%B4%E6%95%B0"><span class="toc-number">21.32.</span> <span class="toc-text">32.如何判断一个数值为整数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#33-%E7%AE%80%E8%BF%B0-koa-%E7%9A%84%E4%B8%AD%E9%97%B4%E4%BB%B6%E5%8E%9F%E7%90%86%EF%BC%8C%E6%89%8B%E5%86%99-koa-compose-%E4%BB%A3%E7%A0%81"><span class="toc-number">21.33.</span> <span class="toc-text">33.简述 koa 的中间件原理，手写 koa-compose 代码</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#34-%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E5%87%BD%E6%95%B0-maxBy%EF%BC%8C%E6%A0%B9%E6%8D%AE%E7%BB%99%E5%AE%9A%E6%9D%A1%E4%BB%B6%E6%89%BE%E5%88%B0%E6%9C%80%E5%A4%A7%E7%9A%84%E6%95%B0%E7%BB%84%E9%A1%B9"><span class="toc-number">21.34.</span> <span class="toc-text">34.实现一个函数 maxBy，根据给定条件找到最大的数组项</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#35-%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E5%87%BD%E6%95%B0-max%EF%BC%8C%E6%89%BE%E5%88%B0%E6%95%B0%E7%BB%84%E4%B8%AD%E6%9C%80%E5%A4%A7%E7%9A%84%E4%B8%80%E4%B8%AA%E5%80%BC-%E4%B8%A4%E4%B8%AA%E5%80%BC-N-%E4%B8%AA%E5%80%BC"><span class="toc-number">21.35.</span> <span class="toc-text">35.实现一个函数 max，找到数组中最大的一个值&#x2F;两个值&#x2F;N 个值</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#36-%E7%BB%9F%E8%AE%A1%E5%AD%97%E7%AC%A6%E4%B8%B2%E4%B8%AD%E5%87%BA%E7%8E%B0%E6%AC%A1%E6%95%B0%E6%9C%80%E5%A4%9A%E7%9A%84%E5%AD%97%E7%AC%A6%E5%8F%8A%E6%AC%A1%E6%95%B0"><span class="toc-number">21.36.</span> <span class="toc-text">36.统计字符串中出现次数最多的字符及次数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#37-%E8%AF%B7%E8%BE%93%E5%87%BA-100-%E4%BB%A5%E5%86%85%E7%9A%84%E8%8F%B2%E6%B3%A2%E9%82%A3%E5%88%87%E6%95%B0%E5%88%97"><span class="toc-number">21.37.</span> <span class="toc-text">37.请输出 100 以内的菲波那切数列</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#38-%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8%E6%AD%A3%E5%88%99%E5%8C%B9%E9%85%8D%E4%B8%80%E4%B8%AA%E6%B1%89%E5%AD%97"><span class="toc-number">21.38.</span> <span class="toc-text">38.如何使用正则匹配一个汉字</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#39-%E5%A6%82%E4%BD%95%E6%8A%8A%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%85%A8%E9%83%A8%E8%BD%AC%E5%8C%96%E4%B8%BA%E5%B0%8F%E5%86%99%E6%A0%BC%E5%BC%8F"><span class="toc-number">21.39.</span> <span class="toc-text">39.如何把字符串全部转化为小写格式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#40-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E6%95%B0%E7%BB%84%E5%87%BD%E6%95%B0-reduce"><span class="toc-number">21.40.</span> <span class="toc-text">40.如何实现数组函数 reduce</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#41-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0-chunk-%E5%87%BD%E6%95%B0%EF%BC%8C%E6%95%B0%E7%BB%84%E8%BF%9B%E8%A1%8C%E5%88%86%E7%BB%84"><span class="toc-number">21.41.</span> <span class="toc-text">41.如何实现 chunk 函数，数组进行分组</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#42-%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E5%BC%82%E6%AD%A5%E7%9A%84-sum-add"><span class="toc-number">21.42.</span> <span class="toc-text">42.实现一个异步的 sum&#x2F;add</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E5%88%9D%E7%BA%A7%E5%AE%9E%E7%8E%B0-%E4%B8%B2%E8%A1%8C%E6%96%B9%E5%BC%8F"><span class="toc-number">21.42.1.</span> <span class="toc-text">1.初级实现: 串行方式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E4%B8%AD%E7%BA%A7%E5%AE%9E%E7%8E%B0-%E5%B9%B6%E8%A1%8C%E6%96%B9%E5%BC%8F"><span class="toc-number">21.42.2.</span> <span class="toc-text">2.中级实现: 并行方式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E6%9B%B4%E8%BF%9B%E4%B8%80%E6%AD%A5-%E6%8E%A7%E5%88%B6%E5%B9%B6%E8%A1%8C%E6%95%B0"><span class="toc-number">21.42.3.</span> <span class="toc-text">3.更进一步: 控制并行数</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#43-%E9%9A%8F%E6%9C%BA%E7%94%9F%E6%88%90%E5%85%AD%E4%BD%8D%E6%95%B0%E7%9A%84%E6%89%8B%E6%9C%BA%E9%AA%8C%E8%AF%81%E7%A0%81-%E9%87%8D%E5%A4%8D-%E4%B8%8D%E5%8F%AF%E9%87%8D%E5%A4%8D"><span class="toc-number">21.43.</span> <span class="toc-text">43.随机生成六位数的手机验证码(重复&#x2F;不可重复)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#44-%E5%A6%82%E4%BD%95%E5%8E%BB%E9%99%A4%E5%AD%97%E7%AC%A6%E4%B8%B2%E9%A6%96%E5%B0%BE%E7%A9%BA%E7%99%BD%E5%AD%97%E7%AC%A6"><span class="toc-number">21.44.</span> <span class="toc-text">44.如何去除字符串首尾空白字符</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#45-%E5%AE%9E%E7%8E%B0-intersection%EF%BC%8C%E5%8F%96%E6%95%B0%E7%BB%84%E4%BA%A4%E9%9B%86"><span class="toc-number">21.45.</span> <span class="toc-text">45.实现 intersection，取数组交集</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#46-%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA-composeLeft-flow-%E4%BB%8E%E5%B7%A6%E5%90%91%E5%8F%B3-%E5%87%BD%E6%95%B0%EF%BC%8C%E8%BF%9B%E8%A1%8C%E5%87%BD%E6%95%B0%E5%90%88%E6%88%90"><span class="toc-number">21.46.</span> <span class="toc-text">46.实现一个 composeLeft&#x2F;flow(从左向右) 函数，进行函数合成</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#47-%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA-render-template-%E5%87%BD%E6%95%B0%EF%BC%8C%E5%8F%AF%E4%BB%A5%E7%94%A8%E4%BB%A5%E6%B8%B2%E6%9F%93%E6%A8%A1%E6%9D%BF"><span class="toc-number">21.47.</span> <span class="toc-text">47.实现一个 render&#x2F;template 函数，可以用以渲染模板</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#48-%E7%BB%99%E5%AE%9A%E4%B8%80%E4%B8%AA%E6%95%B0%E5%80%BC%EF%BC%8C%E7%BB%99%E5%87%BA%E5%AE%83%E5%9C%A8-IEEE754-%E7%9A%84%E8%A1%A8%E7%A4%BA%EF%BC%8C%E5%A6%82%E7%AC%A6%E5%8F%B7%E4%BD%8D%E3%80%81%E6%8C%87%E6%95%B0%E4%BD%8D%E4%B8%8E%E5%88%86%E6%95%B0%E4%BD%8D"><span class="toc-number">21.48.</span> <span class="toc-text">48.给定一个数值，给出它在 IEEE754 的表示，如符号位、指数位与分数位</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#49-%E5%AE%9E%E7%8E%B0%E4%BA%8C%E8%BF%9B%E5%88%B6%E4%B8%8E%E5%8D%81%E8%BF%9B%E5%88%B6%E7%9A%84%E4%BA%92%E7%9B%B8%E8%BD%AC%E5%8C%96%E7%9A%84%E4%B8%A4%E4%B8%AA%E5%87%BD%E6%95%B0"><span class="toc-number">21.49.</span> <span class="toc-text">49.实现二进制与十进制的互相转化的两个函数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#50-%E6%B1%82%E7%BB%99%E5%AE%9A%E6%95%B0%E7%BB%84%E4%B8%AD-N-%E4%B8%AA%E6%95%B0%E7%9B%B8%E5%8A%A0%E4%B9%8B%E5%92%8C%E4%B8%BA-sum-%E6%89%80%E6%9C%89%E5%8F%AF%E8%83%BD%E9%9B%86%E5%90%88"><span class="toc-number">21.50.</span> <span class="toc-text">50.求给定数组中 N 个数相加之和为 sum 所有可能集合</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#51-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA-sampleSize-%E5%87%BD%E6%95%B0%EF%BC%8C%E4%BB%8E%E6%95%B0%E7%BB%84%E4%B8%AD%E9%9A%8F%E6%9C%BA%E5%8F%96-N-%E4%B8%AA%E5%85%83%E7%B4%A0"><span class="toc-number">21.51.</span> <span class="toc-text">51.如何实现一个 sampleSize 函数，从数组中随机取 N 个元素</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#52-%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E5%87%BD%E6%95%B0-keyBy"><span class="toc-number">21.52.</span> <span class="toc-text">52.实现一个函数 keyBy</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#53-%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E5%87%BD%E6%95%B0-groupBy"><span class="toc-number">21.53.</span> <span class="toc-text">53.实现一个函数 groupBy</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#54-%E6%B1%82%E6%AD%A3%E5%BA%8F%E5%A2%9E%E9%95%BF%E7%9A%84%E6%AD%A3%E6%95%B4%E6%95%B0%E6%95%B0%E7%BB%84%E4%B8%AD%EF%BC%8C%E5%85%B6%E5%92%8C%E4%B8%BA-N-%E7%9A%84%E4%B8%A4%E4%B8%AA%E6%95%B0"><span class="toc-number">21.54.</span> <span class="toc-text">54.求正序增长的正整数数组中，其和为 N 的两个数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#55-FizzBuzz%EF%BC%8C%E6%98%AF%E5%90%A6%E8%83%BD%E8%A2%AB-3-%E6%88%96-5-%E6%95%B4%E9%99%A4"><span class="toc-number">21.55.</span> <span class="toc-text">55.FizzBuzz，是否能被 3 或 5 整除</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#56-%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E5%87%BD%E6%95%B0-camelCase%EF%BC%8C%E5%AF%B9%E5%8F%98%E9%87%8F%E8%BD%AC%E5%8C%96%E4%B8%BA%E9%A9%BC%E5%B3%B0%E5%91%BD%E5%90%8D"><span class="toc-number">21.56.</span> <span class="toc-text">56.实现一个函数 camelCase，对变量转化为驼峰命名</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#57-JS-%E4%B8%AD%E5%A6%82%E4%BD%95%E5%8E%9F%E7%94%9F%E5%AE%9E%E7%8E%B0-instanceOf"><span class="toc-number">21.57.</span> <span class="toc-text">57.JS 中如何原生实现 instanceOf</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#58-%E5%A6%82%E4%BD%95%E6%A0%B9%E6%8D%AE-random5-%E9%9A%8F%E6%9C%BA%E7%94%9F%E6%88%90-0-5-%EF%BC%8C%E7%94%9F%E6%88%90%E4%B8%80%E4%B8%AA%E5%87%BD%E6%95%B0-random7%EF%BC%9F"><span class="toc-number">21.58.</span> <span class="toc-text">58.如何根据 random5 随机生成 [0, 5]，生成一个函数 random7？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#59-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA-ORM-%E7%B1%BB%E4%BC%BC%E7%9A%84-find-%E9%93%BE%E5%BC%8F%E8%B0%83%E7%94%A8"><span class="toc-number">21.59.</span> <span class="toc-text">59.如何实现一个 ORM 类似的 find 链式调用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#60-%E5%AE%9E%E7%8E%B0%E5%87%BD%E6%95%B0-promisify%EF%BC%8C%E6%8A%8A%E5%9B%9E%E8%B0%83%E5%87%BD%E6%95%B0%E6%94%B9%E6%88%90-promise-%E5%BD%A2%E5%BC%8F"><span class="toc-number">21.60.</span> <span class="toc-text">60.实现函数 promisify，把回调函数改成 promise 形式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#61-%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA-omit-omitBy-%E5%87%BD%E6%95%B0"><span class="toc-number">21.61.</span> <span class="toc-text">61.如何实现一个 omit&#x2F;omitBy 函数</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E7%AE%80%E5%8D%95%E6%AD%A3%E5%88%99-%E5%85%B12%E9%A2%98"><span class="toc-number">22.</span> <span class="toc-text">简单正则 共2题</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8%E6%AD%A3%E5%88%99%E5%8C%B9%E9%85%8D%E4%B8%80%E4%B8%AA%E6%B1%89%E5%AD%97"><span class="toc-number">22.1.</span> <span class="toc-text">1.如何使用正则匹配一个汉字</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA-render-template-%E5%87%BD%E6%95%B0%EF%BC%8C%E5%8F%AF%E4%BB%A5%E7%94%A8%E4%BB%A5%E6%B8%B2%E6%9F%93%E6%A8%A1%E6%9D%BF"><span class="toc-number">22.2.</span> <span class="toc-text">2.实现一个 render&#x2F;template 函数，可以用以渲染模板</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#Typescript-%E5%85%B16%E9%A2%98"><span class="toc-number">23.</span> <span class="toc-text">Typescript 共6题</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-%E5%9C%A8-Typescript-%E4%B8%AD%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E7%B1%BB%E5%9E%8B%E6%A0%87%E8%AE%B0-Pick-%E4%B8%8E-Omit"><span class="toc-number">23.1.</span> <span class="toc-text">1.在 Typescript 中如何实现类型标记 Pick 与 Omit</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-%E4%BB%80%E4%B9%88%E6%98%AF%E5%8D%8F%E5%8F%98%E4%B8%8E%E9%80%86%E5%8F%98"><span class="toc-number">23.2.</span> <span class="toc-text">2.什么是协变与逆变</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-%E5%9C%A8-ts-%E4%B8%AD%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0-Partial"><span class="toc-number">23.3.</span> <span class="toc-text">3.在 ts 中如何实现 Partial</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-%E5%9C%A8-ts-%E4%B8%AD%E4%BB%80%E4%B9%88%E6%98%AF-infer%EF%BC%8C%E5%B9%B6%E5%AE%9E%E7%8E%B0-Parameters-%E4%B8%8E-ReturnType"><span class="toc-number">23.4.</span> <span class="toc-text">4.在 ts 中什么是 infer，并实现 Parameters 与 ReturnType</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-typescript-%E4%B8%AD-interface-%E4%B8%8E-type-%E6%9C%89%E4%BD%95%E5%8C%BA%E5%88%AB"><span class="toc-number">23.5.</span> <span class="toc-text">5.typescript 中 interface 与 type 有何区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-%E8%AF%B7%E7%AE%80%E8%BF%B0-typescript-%E4%B8%AD%E7%9A%84-infer"><span class="toc-number">23.6.</span> <span class="toc-text">6.请简述 typescript 中的 infer</span></a></li></ol></li></ol></div></div></div></div></main><footer id="footer" style="background-image: url('https://s1.ax1x.com/2023/01/28/pSaldDe.jpg')"><div id="footer-wrap"><div class="copyright">&copy;2022 - 2023 By 晚夜微雨问海棠</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="translateLink" type="button" title="简繁转换">繁</button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="chat_btn" type="button" title="聊天"><i class="fas fa-sms"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div id="rightMenu"><div class="rightMenu-group rightMenu-small"><div class="rightMenu-item" id="menu-backward"><i class="fa-solid fa-arrow-left"></i></div><div class="rightMenu-item" id="menu-forward"><i class="fa-solid fa-arrow-right"></i></div><div class="rightMenu-item" id="menu-refresh"><i class="fa-solid fa-arrow-rotate-right"></i></div><div class="rightMenu-item" id="menu-home"><i class="fa-solid fa-house"></i></div></div><div class="rightMenu-group rightMenu-line rightMenuOther"><a class="rightMenu-item menu-link" href="/archives/"><i class="fa-solid fa-archive"></i><span>文章归档</span></a><a class="rightMenu-item menu-link" href="/categories/"><i class="fa-solid fa-folder-open"></i><span>文章分类</span></a><a class="rightMenu-item menu-link" href="/tags/"><i class="fa-solid fa-tags"></i><span>文章标签</span></a></div><div class="rightMenu-group rightMenu-line rightMenuNormal"><div class="rightMenu-item" id="menu-translate"><i class="fa-solid fa-earth-asia"></i><span>繁简切换</span></div><div class="rightMenu-item" id="menu-darkmode"><i class="fa-solid fa-moon"></i><span>切换模式</span></div></div></div><div id="rightmenu-mask"></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/js/tw_cn.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script src="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js"></script><script src="/js/search/local-search.js"></script><script>var preloader = {
  endLoading: () => {
    document.body.style.overflow = 'auto';
    document.getElementById('loading-box').classList.add("loaded")
  },
  initLoading: () => {
    document.body.style.overflow = '';
    document.getElementById('loading-box').classList.remove("loaded")

  }
}
window.addEventListener('load',preloader.endLoading())</script><div class="js-pjax"><script>(() => {
  const $mermaidWrap = document.querySelectorAll('#article-container .mermaid-wrap')
  if ($mermaidWrap.length) {
    window.runMermaid = () => {
      window.loadMermaid = true
      const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'default'

      Array.from($mermaidWrap).forEach((item, index) => {
        const mermaidSrc = item.firstElementChild
        const mermaidThemeConfig = '%%{init:{ \'theme\':\'' + theme + '\'}}%%\n'
        const mermaidID = 'mermaid-' + index
        const mermaidDefinition = mermaidThemeConfig + mermaidSrc.textContent
        mermaid.mermaidAPI.render(mermaidID, mermaidDefinition, (svgCode) => {
          mermaidSrc.insertAdjacentHTML('afterend', svgCode)
        })
      })
    }

    const loadMermaid = () => {
      window.loadMermaid ? runMermaid() : getScript('https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js').then(runMermaid)
    }

    window.pjax ? loadMermaid() : document.addEventListener('DOMContentLoaded', loadMermaid)
  }
})()</script><script>function loadValine () {
  function initValine () {
    const valine = new Valine(Object.assign({
      el: '#vcomment',
      appId: '',
      appKey: '',
      avatar: 'monsterid',
      serverURLs: '',
      emojiMaps: "",
      path: window.location.pathname,
      visitor: false
    }, null))
  }

  if (typeof Valine === 'function') initValine() 
  else getScript('https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js').then(initValine)
}

if ('Valine' === 'Valine' || !true) {
  if (true) btf.loadComment(document.getElementById('vcomment'),loadValine)
  else setTimeout(loadValine, 0)
} else {
  function loadOtherComment () {
    loadValine()
  }
}</script></div><div class="aplayer no-destroy" data-id="7625372994" data-server="netease" data-type="playlist" data-fixed="true" data-autoplay="true"> </div> <script defer src="https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js"></script> <script src="/swiper/swiper.min.js"></script> <script src="/swiper/swiperindex.js"></script> <script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script> <script src="/js/title.js"></script> <script defer data-pjax src="/js/cat.js"></script> <script defer data-pjax src="/js/rightMenu.js"></script><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/activate-power-mode.min.js"></script><script>POWERMODE.colorful = true;
POWERMODE.shake = false;
POWERMODE.mobile = false;
document.body.addEventListener('input', POWERMODE);
</script><script id="click-heart" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/click-heart.min.js" async="async" mobile="false"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/metingjs/dist/Meting.min.js"></script><script src="https://cdn.jsdelivr.net/npm/pjax/pjax.min.js"></script><script>let pjaxSelectors = ["head > title","#config-diff","#body-wrap","#rightside-config-hide","#rightside-config-show","#web_bg",".js-pjax"]

var pjax = new Pjax({
  elements: 'a:not([target="_blank"])',
  selectors: pjaxSelectors,
  cacheBust: false,
  analytics: false,
  scrollRestoration: false
})

document.addEventListener('pjax:send', function () {

  // removeEventListener scroll 
  window.tocScrollFn && window.removeEventListener('scroll', window.tocScrollFn)
  window.scrollCollect && window.removeEventListener('scroll', scrollCollect)

  typeof preloader === 'object' && preloader.initLoading()
  document.getElementById('rightside').style.cssText = "opacity: ''; transform: ''"
  
  if (window.aplayers) {
    for (let i = 0; i < window.aplayers.length; i++) {
      if (!window.aplayers[i].options.fixed) {
        window.aplayers[i].destroy()
      }
    }
  }

  typeof typed === 'object' && typed.destroy()

  //reset readmode
  const $bodyClassList = document.body.classList
  $bodyClassList.contains('read-mode') && $bodyClassList.remove('read-mode')

  typeof disqusjs === 'object' && disqusjs.destroy()
})

document.addEventListener('pjax:complete', function () {
  window.refreshFn()

  document.querySelectorAll('script[data-pjax]').forEach(item => {
    const newScript = document.createElement('script')
    const content = item.text || item.textContent || item.innerHTML || ""
    Array.from(item.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value))
    newScript.appendChild(document.createTextNode(content))
    item.parentNode.replaceChild(newScript, item)
  })

  GLOBAL_CONFIG.islazyload && window.lazyLoadInstance.update()

  typeof chatBtnFn === 'function' && chatBtnFn()
  typeof panguInit === 'function' && panguInit()

  // google analytics
  typeof gtag === 'function' && gtag('config', '', {'page_path': window.location.pathname});

  // baidu analytics
  typeof _hmt === 'object' && _hmt.push(['_trackPageview',window.location.pathname]);

  typeof loadMeting === 'function' && document.getElementsByClassName('aplayer').length && loadMeting()

  // prismjs
  typeof Prism === 'object' && Prism.highlightAll()

  typeof preloader === 'object' && preloader.endLoading()
})

document.addEventListener('pjax:error', (e) => {
  if (e.request.status === 404) {
    pjax.loadUrl('/404.html')
  }
})</script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div><!-- hexo injector body_end start --><script data-pjax>function history_calendar_injector_config(){
                var parent_div_git = document.getElementsByClassName('sticky_layout')[0];
                var item_html = '<div class="card-widget card-history"><div class="card-content"><div class="item-headline"><i class="fas fa-clock fa-spin"></i><span>那年今日</span></div><div id="history-baidu" style="height: 100px;overflow: hidden"><div class="history_swiper-container" id="history-container" style="width: 100%;height: 100%"><div class="swiper-wrapper" id="history_container_wrapper" style="height:20px"></div></div></div></div>';
                console.log('已挂载history_calendar')
                // parent_div_git.innerHTML=item_html+parent_div_git.innerHTML // 无报错，但不影响使用(支持pjax跳转)
                parent_div_git.insertAdjacentHTML("afterbegin",item_html) // 有报错，但不影响使用(支持pjax跳转)
            }if( document.getElementsByClassName('sticky_layout')[0] && (location.pathname ==='/'|| '/' ==='all')){

            history_calendar_injector_config()
        } </script><script data-pjax  src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script><script data-pjax src="https://cdn.jsdelivr.net/gh/Zfour/Butterfly-card-history/baiduhistory/js/main.js"></script><script data-pjax>
    function butterfly_categories_card_injector_config(){
      var parent_div_git = document.getElementById('recent-posts');
      var item_html = '<style>li.categoryBar-list-item{width:24%;}.categoryBar-list{max-height: 190px;overflow:auto;}.categoryBar-list::-webkit-scrollbar{width:0!important}@media screen and (max-width: 650px){.categoryBar-list{max-height: 160px;}}</style><div class="recent-post-item" style="height:auto;width:100%;padding:0px;"><div id="categoryBar"><ul class="categoryBar-list"><li class="categoryBar-list-item" style="background:url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpicnew6.photophoto.cn%2F20120106%2Fhaimianbaobaotupian-10036689_1.jpg&amp;refer=http%3A%2F%2Fpicnew6.photophoto.cn&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=auto?sec=1665648815&amp;t=a3deb15ddd7a38597964c3a05e519bd7);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/Asp-Net/&quot;);" href="javascript:void(0);">Asp.Net</a><span class="categoryBar-list-count">1</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/common/site-backgound.jpg);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/C-系列/&quot;);" href="javascript:void(0);">C#系列</a><span class="categoryBar-list-count">8</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13012860773%2F1000.jpg&amp;refer=http%3A%2F%2Finews.gtimg.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=auto?sec=1665648865&amp;t=1d2f13b52a7e279e8801545f59eda4e7);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/Hexo重装记录/&quot;);" href="javascript:void(0);">Hexo重装记录</a><span class="categoryBar-list-count">2</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202011%2F07%2F20201107183300_ac0c5.thumb.1000_0.jpeg&amp;refer=http%3A%2F%2Fc-ssl.duitang.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=auto?sec=1665648887&amp;t=3d32c6b12a4cf12e5cec3585b79c1fc3);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/EF/&quot;);" href="javascript:void(0);">EF</a><span class="categoryBar-list-count">1</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F25%2Feb%2F1f%2F25eb1fd40b5a740c2b79e33f700806e5.jpg&amp;refer=http%3A%2F%2Fup.enterdesk.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=auto?sec=1665648908&amp;t=6425ee3bd166b0f5c5ffa6fb18b6937b);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/LOL/&quot;);" href="javascript:void(0);">LOL</a><span class="categoryBar-list-count">1</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2Ftx26%2F36080017392073.jpg&amp;refer=http%3A%2F%2Flmg.jj20.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=auto?sec=1665650136&amp;t=5cc414d0ee58c9e285218d92f6a95513);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/idea/&quot;);" href="javascript:void(0);">idea</a><span class="categoryBar-list-count">1</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn10%2F320%2Fw700h420%2F20180907%2F5116-hitesuz6599636.jpg&amp;refer=http%3A%2F%2Fn.sinaimg.cn&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=auto?sec=1665650004&amp;t=6a304aa9cc7435ec1d148b8f99092bc0);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/世界/&quot;);" href="javascript:void(0);">世界</a><span class="categoryBar-list-count">1</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://s1.ax1x.com/2022/11/15/zAxCi6.jpg);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/世界见闻录/&quot;);" href="javascript:void(0);">世界见闻录</a><span class="categoryBar-list-count">8</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://s1.ax1x.com/2022/11/15/zAxFzD.jpg);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/前端体系/&quot;);" href="javascript:void(0);">前端体系</a><span class="categoryBar-list-count">19</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://s1.ax1x.com/2022/11/15/zAxnot.jpg);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/副业/&quot;);" href="javascript:void(0);">副业</a><span class="categoryBar-list-count">1</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://s1.ax1x.com/2022/11/15/zAxMJf.jpg);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/文案/&quot;);" href="javascript:void(0);">文案</a><span class="categoryBar-list-count">6</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://s1.ax1x.com/2022/11/15/zAxQW8.jpg);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/办公日常/&quot;);" href="javascript:void(0);">办公日常</a><span class="categoryBar-list-count">2</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://s1.ax1x.com/2022/11/15/zAx3Qg.jpg);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/朝花夕拾/&quot;);" href="javascript:void(0);">朝花夕拾</a><span class="categoryBar-list-count">12</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(https://s1.ax1x.com/2022/11/15/zAxYes.jpg);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/前端/&quot;);" href="javascript:void(0);">前端</a><span class="categoryBar-list-count">20</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(undefined);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/杂七杂八/&quot;);" href="javascript:void(0);">杂七杂八</a><span class="categoryBar-list-count">7</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(undefined);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/简书/&quot;);" href="javascript:void(0);">简书</a><span class="categoryBar-list-count">5</span><span class="categoryBar-list-descr"></span></li><li class="categoryBar-list-item" style="background:url(undefined);"> <a class="categoryBar-list-link" onclick="pjax.loadUrl(&quot;categories/游戏/&quot;);" href="javascript:void(0);">游戏</a><span class="categoryBar-list-count">1</span><span class="categoryBar-list-descr"></span></li></ul></div></div>';
      console.log('已挂载butterfly_categories_card')
      parent_div_git.insertAdjacentHTML("afterbegin",item_html)
      }
    if( document.getElementById('recent-posts') && (location.pathname ==='/'|| '/' ==='all')){
    butterfly_categories_card_injector_config()
    }
  </script><script data-pjax>
  function butterfly_clock_anzhiyu_injector_config(){
    var parent_div_git = document.getElementsByClassName('sticky_layout')[0];
    var item_html = '<div class="card-widget card-clock"><div class="card-glass"><div class="card-background"><div class="card-content"><div id="hexo_electric_clock"><img class="entered loading" id="card-clock-loading" src= "" data-lazy-src="https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/loading.gif" style="height: 120px; width: 100%;" data-ll-status="loading"/></div></div></div></div></div>';
    console.log('已挂载butterfly_clock_anzhiyu')
    parent_div_git.insertAdjacentHTML("afterbegin",item_html)
    }
  var elist = 'null'.split(',');
  var cpage = location.pathname;
  var epage = '/';
  var qweather_key = '41ea442da35546559913a6a5d54163b2';
  var gaud_map_key = '6b62fbebf584b9a22a85bfccbf90335e';
  var baidu_ak_key = 'undefined';
  var flag = 0;
  var clock_rectangle = '114.35,34.79';
  var clock_default_rectangle_enable = 'true';

  for (var i=0;i<elist.length;i++){
    if (cpage.includes(elist[i])){
      flag++;
    }
  }

  if ((epage ==='all')&&(flag == 0)){
    butterfly_clock_anzhiyu_injector_config();
  }
  else if (epage === cpage){
    butterfly_clock_anzhiyu_injector_config();
  }
  </script><script src="https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0"></script><script data-pjax src="https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/clock.min.js"></script><script data-pjax>
  function butterfly_footer_beautify_injector_config(){
    var parent_div_git = document.getElementById('footer-wrap');
    var item_html = '<div id="workboard"></div><p id="ghbdages"><a class="github-badge" target="_blank" href="https://hexo.io/" style="margin-inline:5px" data-title="博客框架为Hexo_v5.4.0" title=""><img src= "" data-lazy-src="https://img.shields.io/badge/Frame-Hexo-blue?style=flat&amp;logo=hexo" alt=""/></a><a class="github-badge" target="_blank" href="https://butterfly.js.org/" style="margin-inline:5px" data-title="主题版本Butterfly_v4.2.2" title=""><img src= "" data-lazy-src="https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&amp;logo=bitdefender" alt=""/></a><a class="github-badge" target="_blank" href="https://www.jsdelivr.com/" style="margin-inline:5px" data-title="本站使用JsDelivr为静态资源提供CDN加速" title=""><img src= "" data-lazy-src="https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&amp;logo=jsDelivr" alt=""/></a><a class="github-badge" target="_blank" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" style="margin-inline:5px" data-title="本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可" title=""><img src= "" data-lazy-src="https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&amp;logo=Claris" alt=""/></a></p>';
    console.log('已挂载butterfly_footer_beautify')
    parent_div_git.insertAdjacentHTML("beforeend",item_html)
    }
  var elist = 'null'.split(',');
  var cpage = location.pathname;
  var epage = 'all';
  var flag = 0;

  for (var i=0;i<elist.length;i++){
    if (cpage.includes(elist[i])){
      flag++;
    }
  }

  if ((epage ==='all')&&(flag == 0)){
    butterfly_footer_beautify_injector_config();
  }
  else if (epage === cpage){
    butterfly_footer_beautify_injector_config();
  }
  </script><script async src="/js/runtime/runtime.min.js"></script><script data-pjax>
  function butterfly_swiper_injector_config(){
    var parent_div_git = document.getElementById('recent-posts');
    var item_html = '<div class="recent-post-item swiper_container_card" style="height: auto;width: 100%"><div id="random"><div id="random-banner"><canvas id="peoplecanvas"></canvas></div><a id="random-hover" style="width:100%;height:auto;" href="javascript:toRandomPost()" rel="external nofollow noreferrer" one-link-mark="yes"><i class="fa fa-paper-plane" style="margin-left:10px"></i><div style="margin-left:10px">随便逛逛<i class="fa-solid fa-arrow-right" style="margin-left:10px"></i></div></a></div><div class="blog-slider swiper-container-fade swiper-container-horizontal" id="swiper_container"><div class="blog-slider__wrp swiper-wrapper" style="transition-duration: 0ms;"><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;posts/67fcd28d.html&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src= "" data-lazy-src="https://img2.baidu.com/it/u=4087346614,241521689&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;h=333" alt="" onerror="this.src=https://cdn.cbd.int/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2022-09-19</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;posts/67fcd28d.html&quot;);" href="javascript:void(0);" alt="">学生人到职业人_心态篇</a><div class="blog-slider__text">再怎么看我也不知道怎么描述它的啦！</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;posts/67fcd28d.html&quot;);" href="javascript:void(0);" alt="">详情       </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;posts/8a73f76c.html&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src= "" data-lazy-src="https://s1.ax1x.com/2022/11/04/xLiBTA.jpg" alt="" onerror="this.src=https://cdn.cbd.int/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2022-11-04</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;posts/8a73f76c.html&quot;);" href="javascript:void(0);" alt="">生活の奇思妙想☞2022</a><div class="blog-slider__text">再怎么看我也不知道怎么描述它的啦！</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;posts/8a73f76c.html&quot;);" href="javascript:void(0);" alt="">详情       </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;posts/14e5dae6.html&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src= "" data-lazy-src="https://s1.ax1x.com/2022/10/21/xcAQDH.jpg" alt="" onerror="this.src=https://cdn.cbd.int/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2022-11-12</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;posts/14e5dae6.html&quot;);" href="javascript:void(0);" alt="">少年自负凌云笔</a><div class="blog-slider__text">再怎么看我也不知道怎么描述它的啦！</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;posts/14e5dae6.html&quot;);" href="javascript:void(0);" alt="">详情       </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;posts/9b7092b7.html&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src= "" data-lazy-src="https://s1.ax1x.com/2022/10/11/xNJbF0.jpg" alt="" onerror="this.src=https://cdn.cbd.int/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2022-09-13</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;posts/9b7092b7.html&quot;);" href="javascript:void(0);" alt="">租房有感</a><div class="blog-slider__text">再怎么看我也不知道怎么描述它的啦！</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;posts/9b7092b7.html&quot;);" href="javascript:void(0);" alt="">详情       </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;posts/94bbc7d.html&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src= "" data-lazy-src="https://s1.ax1x.com/2022/10/11/xNJLWT.jpg" alt="" onerror="this.src=https://cdn.cbd.int/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2022-09-25</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;posts/94bbc7d.html&quot;);" href="javascript:void(0);" alt="">谷歌收藏</a><div class="blog-slider__text">再怎么看我也不知道怎么描述它的啦！</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;posts/94bbc7d.html&quot;);" href="javascript:void(0);" alt="">详情       </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;posts/3b350f14.html&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src= "" data-lazy-src="https://s1.ax1x.com/2022/10/11/xNJJd1.jpg" alt="" onerror="this.src=https://cdn.cbd.int/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2022-09-13</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;posts/3b350f14.html&quot;);" href="javascript:void(0);" alt="">阳光不燥、微风正好</a><div class="blog-slider__text">再怎么看我也不知道怎么描述它的啦！</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;posts/3b350f14.html&quot;);" href="javascript:void(0);" alt="">详情       </a></div></div></div><div class="blog-slider__pagination swiper-pagination-clickable swiper-pagination-bullets"></div></div></div>';
    console.log('已挂载butterfly_swiper')
    parent_div_git.insertAdjacentHTML("afterbegin",item_html)
    }
  var elist = 'undefined'.split(',');
  var cpage = location.pathname;
  var epage = '/';
  var flag = 0;

  for (var i=0;i<elist.length;i++){
    if (cpage.includes(elist[i])){
      flag++;
    }
  }

  if ((epage ==='all')&&(flag == 0)){
    butterfly_swiper_injector_config();
  }
  else if (epage === cpage){
    butterfly_swiper_injector_config();
  }
  </script><script defer src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/js/swiper.min.js"></script><script defer data-pjax src="https://cdn.cbd.int/hexo-butterfly-swiper-anzhiyu@1.0.4/lib/swiper_init.js"></script><script data-pjax src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/gsap/3.9.1/gsap.min.js"></script><script defer src="https://npm.elemecdn.com/hexo-butterfly-swiper-anzhiyu@1.0.4/lib/people.min.js"></script><script async src="/anzhiyu/random.js"></script><div class="js-pjax"><script async="async">var arr = document.getElementsByClassName('recent-post-item');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__zoomIn');
    arr[i].setAttribute('data-wow-duration', '1.5s');
    arr[i].setAttribute('data-wow-delay', '200ms');
    arr[i].setAttribute('data-wow-offset', '30');
    arr[i].setAttribute('data-wow-iteration', '1');
  }</script><script async="async">var arr = document.getElementsByClassName('card-widget');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__zoomIn');
    arr[i].setAttribute('data-wow-duration', '');
    arr[i].setAttribute('data-wow-delay', '200ms');
    arr[i].setAttribute('data-wow-offset', '');
    arr[i].setAttribute('data-wow-iteration', '');
  }</script><script async="async">var arr = document.getElementsByClassName('flink-list-card');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__flipInY');
    arr[i].setAttribute('data-wow-duration', '3s');
    arr[i].setAttribute('data-wow-delay', '');
    arr[i].setAttribute('data-wow-offset', '');
    arr[i].setAttribute('data-wow-iteration', '');
  }</script><script async="async">var arr = document.getElementsByClassName('flink-list-card');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__animated');
    arr[i].setAttribute('data-wow-duration', '3s');
    arr[i].setAttribute('data-wow-delay', '');
    arr[i].setAttribute('data-wow-offset', '');
    arr[i].setAttribute('data-wow-iteration', '');
  }</script><script async="async">var arr = document.getElementsByClassName('article-sort-item');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__slideInRight');
    arr[i].setAttribute('data-wow-duration', '1.5s');
    arr[i].setAttribute('data-wow-delay', '');
    arr[i].setAttribute('data-wow-offset', '');
    arr[i].setAttribute('data-wow-iteration', '');
  }</script><script async="async">var arr = document.getElementsByClassName('site-card');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__flipInY');
    arr[i].setAttribute('data-wow-duration', '3s');
    arr[i].setAttribute('data-wow-delay', '');
    arr[i].setAttribute('data-wow-offset', '');
    arr[i].setAttribute('data-wow-iteration', '');
  }</script><script async="async">var arr = document.getElementsByClassName('site-card');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__animated');
    arr[i].setAttribute('data-wow-duration', '3s');
    arr[i].setAttribute('data-wow-delay', '');
    arr[i].setAttribute('data-wow-offset', '');
    arr[i].setAttribute('data-wow-iteration', '');
  }</script></div><script defer src="https://cdn.cbd.int/hexo-butterfly-wowjs/lib/wow.min.js"></script><script defer src="https://cdn.cbd.int/hexo-butterfly-wowjs/lib/wow_init.js"></script><script async src="/js/ali_font.js"></script><!-- hexo injector body_end end --><script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/koharu.model.json"},"display":{"position":"left","width":150,"height":300},"mobile":{"show":false},"log":false,"pluginJsPath":"lib/","pluginModelPath":"assets/","pluginRootPath":"live2dw/"});</script></body></html>